一、transform-style
1、transform-style屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。
有兩個屬性值：flat和preserve-3d。
transform-style屬性的使用文法非常簡單： transform-style: flat | preserve-3d
其中flat值為預設值，表示所有子元素在2D平面呈現。
2、preserve-3d表示所有子元素在3D空間中呈現。
如果對一個元素設定了transform-style的值為flat，則該元素的所有子元素都将被平展到該元素的2D平面中進行呈現。沿着X軸或Y軸方向旋轉該元素将導緻位于正或負Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者後面。如果對一個元素設定了transform-style的值為preserve-3d，它表示不執行平展操作，他的所有子元素位于3D空間中。
二、perspective屬性
perspective屬性對于3D變形來說至關重要。該屬性會設定檢視者的位置，并将可視内容映射到一個視錐上，繼而投到一個2D視平面上。如果不指定透視，則Z軸空間中的所有點将平鋪到同一個2D視平面中，并且變換結果中将不存在景深概念。
其實對于perspective屬性，我們可以簡單的了解為視距，用來設定使用者和元素3D空間Z平面之間的距離。而其效應由他的值來決定，值越小，使用者與3D空間Z平面距離越近，視覺效果更令人印象深刻；反之，值越大，使用者與3D空間Z平面距離越遠，視覺效果就很小。 在3D變形中，對于某些變形，例如下面的示例示範的沿Z軸的變形，perspective屬性對于檢視變形的效果來說必不可少。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>3d</title>
6 <style>
7 .out{
8 width: 500px;
9 height: 500px;
10 border: 1px solid #000;
11 background-color: pink;
12 margin:100px auto;
13 transform: rotateY(60deg);
14 /*可以讓裡面的盒子保持3d效果,加給父盒子*/
15 transform-style: preserve-3d;
16 }
17 .in{
18 width: 300px;
19 height: 400px;
20 margin: 50px auto;
21 background-color: green;
22 transform: rotateX(130deg);
23 }
24 </style>
25 </head>
26 <body>
27 <div class="out">
28 <div class="in"></div>
29 </div>
30 </body>
31 </html>
運作效果：
三、backface-visibility屬性
backface-visibility
屬性決定元素旋轉背面是否可見。對于未旋轉的元素，該元素的正面面向觀看者。當其Y軸旋轉約180度時會導緻元素的背面面對觀衆。
backface-visibility
屬性使用文法很簡單：
backface-visibility: visible | hidden
該屬性被設定為以下兩個關鍵詞之一：
- visible：為backface-visibility的預設值，表示反面可見
- hidden：表示反面不可見
案例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 background-color: deepskyblue;
9 }
10 .box{
11 width: 300px;
12 height: 300px;
13 border:1px solid #000;
14 margin:100px auto;
15 position: relative;
16 }
17 .box::after,.box::before{
18 content:"";
19 position: absolute;
20 width: 100%;
21 height: 100%;
22 border-radius: 50%;
23 background-color: pink;
24 background: url("images/bg.png") no-repeat left top;
25 transition: 1s;
26 /*讓盒子背面隐藏*/
27 backface-visibility: hidden;
28 }
29 .box::before{
30 transform: rotateY(-180deg);
31 }
32 .box::after{
33 background-position: right top;
34 }
35 .box:hover::before{
36 transform: rotateY(0deg);
37 }
38 .box:hover::after{
39 transform: rotateY(180deg);
40 }
41 </style>
42 </head>
43 <body>
44 <div class="box"></div>
45 </body>
46 </html>
運作效果：
