关于transform-style：preserve-3d的⼀些理解
transform-style属性是3D空间⼀个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。
transform-style属性的使⽤语法⾮常简单：
CSS Code 复制内容到剪贴板
1. 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模板
XML/HTML Code 复制内容到剪贴板
1. <div class="wrap">
2.    <div class="spin">
3.        <div class="rotate">
4.            <img src="images/cardKingClub.png" alt="" width="142" height="200" />
5.        </div>
6.    </div>
7. </div>
8. <div class="wrap">
9.    <div class="spin">
10.        <div class="rotate three-d">
11.            <img src="images/cardKingClub.png" alt="" width="142" height="200" />
12.        </div>
13.    </div>
14. </div>
CSS
CSS Code 复制内容到剪贴板
1. .wrap {
2.    width: 500px;
3.    height: 300px;
4.    margin: 30px auto;
5.    position: relative;
6.    background: url(images/bg-grid.jpg) no-repeat center center;
7.    background-size: 100% 100%;
8. }
9. /*设置动画*/
10. @keyframes spin{
11.    0%{
12.        transform:rotateY(0deg)
13.    }
14.    100%{
15.        transform:rotateY(360deg)
rotate属性
16.    }
17. }
18. .spin {
19.    width: 142px;
20.    height: 200px;
21.    position: absolute;
22.    top: 50%;
23.    left: 50%;
24.    margin-left: -72px;
25.    margin-top: -101px;
26.    border: 1px dashed orange;
27.    cursor: pointer;
28.    transform-style: preserve-3d;
29. }
30. /*调⽤动画*/
31. .spin:hover{
32.    animation:spin 5s linear infinite;
33. }
34. .rotate {
35.    background: url(images/cardKingClub.png) no-repeat center;
36.    background-size: 100% 100%;
37.    border: 5px solid hsla(50,50%,50%,.9);
38.    transform: perspective(200px) rotateY(45deg);
39. }
40. .rotate img{
41.    border: 1px solid green;
42.    transform: rotateX(15deg) translateZ(10px);
43.    transform-origin: 0 0 40px;
44. }
45. /*改变transform-style的默认值*/
46. .three-d {
47.    transform-style: preserve-3d;
48. }
特别声明：为了节省篇幅，代码中CSS3属性代码省去了各浏览器的私有前缀，在实际操作中，需要将各浏览器前缀加上，才会有效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。