Desoer
2015-11-20 00:58
<div class="container">3</div>
.container{
width: 300px;
height: 300px;
background: #2B1919;
margin: 50px auto;
text-align: center;
line-height: 300px;
font-size: 250px;
color: #91A7A8;
}
.container{
-webkit-perspective:0;
-webkit-perspective-origin:bottom;
-webkit-transform-style:perspective-3d;
-moz-perspective:0;
-moz-perspective-origin:bottom;
-moz-transform-style:perspective-3d;
perspective:0;
perspective-origin:bottom;
transform-style:perspective-3d;
overflow: hidden;
transition:1s ease-in-out 0.1s;
}
.container:hover{
-webkit-transform:rotateX(90deg);
/* -webkit-transform:rotateY(90deg); */
/* -webkit-transform:rotateZ(90deg); */
-moz-transform:rotateX(90deg);
/* -moz-transform:rotateY(90deg);
-moz-transform:rotateZ(90deg); */
transform:rotateX(90deg);
/* transform:rotateY(90deg);
transform:rotateZ(90deg); */
}
有一种可能是浏览器的支持原因,这个属性目前浏览器都不支持,但是chrome和safari支持替代的 -webkit-perspecitve-origin 属性。
CSS3 3D 特效
78565 学习 · 436 问题
相似问题