有没有人能够生成这个翻转/翻转动画的CSS代码,如下面的简短截屏视频所示:
https://www.dropbox.com/s/18jr4dtdzi8mep6/css-hover.mp4?dl=0
提前致谢。
-Gerd
答案 0 :(得分:2)
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;
}
有关详细信息,您必须阅读透视图的工作原理, 以及转变起源。