This question has already been answered:

When you direct it, it turns over and on the back side the text is written

Reported as a duplicate by kizoso , MedvedevDev , Vadizar , Air , Arthur members on Apr 11 '18 at 20:22 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • one
    You take, register styles, it turns over. But seriously, add to the question the minimum reproducible example of your attempts that you did not succeed specifically. - kizoso

1 answer 1

We will need:

  1. The element of the card, with position: relative , when you hover on which all the magic will occur.

  2. Back ( div.card__back ), which will be deployed during this event. Position: absolute and z-index: 0 to be behind the top block.

  3. And, accordingly, the top element ( div.card__front ), which collapses when you hover the user. BUT, z-index: 1 just will not work, we add position: relative

Now the magic itself. Initially, the rear block in us has a transform: rotatY(-180deg) , which means that it is rotated about the Y-axis by 180 degrees, and it is reflected from our viewing angle. And when hovering, the upper one is already reflected at 180, and the rear one comes to a normal state, but this is just an animation, since their display switches the z-index .

It remains only to explain to the browser how to draw this animation, and I added a business cube for the animation animation - transition: transform .3s cubic-bezier(.2,.85,.4,1.275) . And also indicate one property that is rarely used, because it is responsible for displaying the back side of the object backface-visibility: hidden

 .card { position: relative; width: 300px; height: 100px; color: white; } .card__front{ z-index: 1; position: relative; background-color: cyan; height: 100%; text-align: center; backface-visibility: hidden; transition: transform .3s cubic-bezier(.2,.85,.4,1.275); } .card__back{ z-index: 0; position: absolute; top: 0; width: 100%; height: 100%; text-align: center; backface-visibility: hidden; background-color: orange; transform: rotateY(-180deg); transition: transform .3s cubic-bezier(.2,.85,.4,1.275); } .card:hover .card__back { transform: rotateY(0deg); z-index: 2; } .card:hover .card__front { transform: rotateY(180deg); z-index: -1; } 
 <div class="card"> <div class="card__front">123</div> <div class="card__back">321</div> </div>

  • 2
    the answer is decent, just explain what backface-visibility does this property ... then your answer will be super - user33274