div flip

by Rinas

HTML

<div class="container">
<div class="carddiv">
    <img class="frontofcard" src="img" alt="img"/>
<p class="backofcard">Text</p>
</div>
</div>

CSS

.carddiv {
width:200px; height:150px; position:relative;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 75px;
-webkit-transition: all 0.7s ease;
transform-style: preserve-3d;
transform-origin: 100% 75px;
transition: all 0.7s ease;
}
.container:hover .carddiv {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.frontofcard, .backofcard {
width:200px; height:150px; position:absolute; left:0; 
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.backofcard {
padding-top:50px;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}