Does anyone know how to create this 3d flip animation via CSS?

Question

Does anyone have the CSS code that would generate this flip in/ flip out animation as seen in this short screencast:

https://www.dropbox.com/s/18jr4dtdzi8mep6/css-hover.mp4?dl=0

Thanks in advance.

-Gerd

Answer 1

http://www.w3schools.com/cssref/css3_pr_perspective.asp

Try looking into perspective property in css.this will do the thing whcih you want to do.

<div id="div1">
    <div id="div2">
    </div>
</div>


#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 0px; /* Chrome, Safari, Opera  */
perspective: 300px;
}


#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform: rotateX(90deg); /* Chrome, Safari, Opera  */
-webkit-transition:0.5s;
transition:1s;
transform: rotateX(76deg);
transform-origin:0 0;
opacity:1;
}

#div1:hover#div1 > #div2
{
opacity:1;
-webkit-transform: rotateX(0deg); /* Chrome, Safari, Opera  */
transform: rotateX(0deg);
-webkit-transition:0.5s;
transition:1s;
}

for more details, you will have to read on how does perspective works, and also about transform origin.