CSS3 - 3D Card flip animation without using click events [duplicate] - css

Question

This question already has answers here:
Flip a 3D card with CSS
(2 answers)
Closed 6 years ago.
I'm new in CSS3, and I am interested in 3D animation with it. I have a question and hope someone can help me. Is there any way to make a card flip effect without using click events? I have searched a lot about it but could not generate results with my little experience. Please, could you help me?

Answer 1

You can do this with css-transitions and no Javascript at all. Using :target css attribute to detect the state of the card
CSS
a {
display: block;
margin-bottom: 10px;
padding: 10px;
width: 135px;
background: red;
border: 1px solid black;
border-radius: 10px;
color: white;
text-transform: uppercase;
text-decoration: none;
}
a.unflip { display: none; }
div.card { position: relative; }
img {
position: absolute;
width: 190px;
height: 265px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
img.front { z-index: 1; }
img.back, div#flip:target img.front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 0;
}
div#flip:target a.flip { display: none; }
div#flip:target a.unflip { display: block; }
div#flip:target img.back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 1;
}
HTML :
<div class='card' id='flip'>
<a href='#flip' class='flip'>Flip that card</a>
<a href='#unflip' class='unflip'>Flip that card</a>
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRZNrO98qaNGRBnMuuMctzqNMsE0DeUQXelgWi2zPsKYmjD-lqn' class='front' />
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSwcvrsqZZFqZYMPSfVGDomBaDbQc2b7A1i88kDA2P52k3VN0y7w' class='back' />
</div>
Demo here : http://jsbin.com/emolev/1/edit