在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的transform-origin
属性的使用,其实在transform
属性中,transform-origin
属性仅是其中之一,要彻底理解transform
属性,这是不够的,必须的理解其他属性的应用。今天将和大家一起探讨transform
中transform-style
和perspective
相关属性的使用。
transform-style
属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。他主要有两个属性值:flat
和preserve-3d
。
transform-style
属性的使用语法非常简单:
transform-style: flat | preserve-3d
其中flat
值为默认值,表示所有子元素在2D平面呈现。preserve-3d
表示所有子元素在3D空间中呈现。
也就是说,如果对一个元素设置了transform-style
的值为flat
,则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上,而不是它的前面或者后面。如果对一个元素设置了transform-style
的值为preserve-3d
,它表示不执行平展操作,他的所有子元素位于3D空间中。
transform-style
属性需要设置在父元素中,并且高于任何嵌套的变形元素。最后,我们运用一个翻转的例子,来加深一下对transform-style
属性的印象:
<div class="wrap"> <div class="spin"> <div class="rotate"> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> </div> </div> <div class="wrap"> <div class="spin"> <div class="rotate three-d"> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> </div> </div>
.wrap { width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(images/bg-grid.jpg) no-repeat center center; background-size: 100% 100%; } /*设置动画*/ @keyframes spin{ 0%{ transform:rotateY(0deg) } 100%{ transform:rotateY(360deg) } } .spin { width: 142px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -72px; margin-top: -101px; border: 1px dashed orange; cursor: pointer; transform-style: preserve-3d; } /*调用动画*/ .spin:hover{ animation:spin 5s linear infinite; } .rotate { background: url(images/cardKingClub.png) no-repeat center; background-size: 100%