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

Question

有没有人有 CSS 代码来生成这个翻转入/翻转出动画，如这个简短的截屏视频所示：

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

提前致谢。

-葛德

Answer 1

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

尝试从属性的角度看 css.this 会做您想做的事。

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

有关更多详细信息，您必须阅读透视的工作原理，还有关于变换原点。

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

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

css

css-animations