Transform-style和Perspective属性
transform-style属性
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
属性的印象:
HTML模板
<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>
CSS
.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;