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 特效
78572 学习 · 425 问题
相似问题