有谁知道如何通过CSS创建这个3D翻转动画？

Question

有没有人能够生成这个翻转/翻转动画的CSS代码，如下面的简短截屏视频所示：

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

提前致谢。

-Gerd

Answer 1

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

尝试在css中查看透视属性。这将完成您想要做的事情。

<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;
}

有关详细信息，您必须阅读透视图的工作原理， 以及转变起源。