1. transform-style：preserve-3d，該屬性設置在父級元素中，它的子級元素具有3d效果
注意：設置了該屬性，就不能防止子級元素溢出，即不能設置overf：hidden屬性；如果設置了overflow：hidden，那麼transform-style：preserve-3d就無效。
2. transform：perspective；景深，觀察者到物體的距離；單位：px，比如：transform：perspective(500px);
英語：perspective：透鏡，望遠鏡;觀點，看法;遠景，景色;洞察力
（1）該屬性設置在父級元素中，對於子級元素而言，都只有一個公共的視角
比如：該例子中，父級設置3d屬性，設置景深；三個子級元素的旋轉角度都是 60度，但是視覺上卻不一樣，因爲觀察者的視角是某個特定位置。該視角下去看三個子級，
<style>
.wrapper{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 300px;
border: 1px solid black;
transform-style: preserve-3d;
transform: perspective(500px);
}
.wrapper div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
transform: rotateX(60deg);
}
.wrapper div:nth-of-type(2){
width: 100px;
height: 100px;
background: blue;
transform: rotateX(60deg);
}
.wrapper div:nth-of-type(3){
width: 100px;
height: 100px;
background: green;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
</body>
注意：保留3d+景深+旋轉 == 纔會看到3d效果
（2）如果transform：perspective設置在子級元素中，對每個子級進行單獨的視角設置
注意：transform屬性要複合寫，不然會覆蓋無效。
而且，屬性有先後：transform: perspective(500px) rotateX(60deg);
比如：三個子級的景深：transform: perspective(500px) rotateX(60deg);
結果：
如果其中一個的景深是：transform: perspective(100px) rotateX(60deg);
結果：景深太小，視角距離物體越近，那麼看着物體會變大。
3. perspective-origin：深源，也是視角的位置，確定了視角在水平面的位置；景深確定的是：垂直高度
這樣才能確定視角在空間中的位置。父級屬性，默認情況下，在父級容器中心 50% 50%
對於 Chrome 和 Safari 用戶: 爲了更好地理解perspective-Origin屬性，請查看 查看實例.
因爲視角位置的改變，看到的物體樣子也發生變化，物體的移動效果，直接看實例
注意：transform：perspective()；和 perspective-origin；兩個屬性都是設置在父級中，纔有效果，是兩個關聯的屬性
| x | 父級盒子寬的相對值，默認50%。值：left、center、right；length；% |
| y | 父級盒子高的相對值，默認50%。值：top、center、bottom；length； % |
4. backface-visibility：visible(可見) | hidden(隱藏)
背面是否可以看見
5. 轉軸：css3屬性的空間直角座標系是相對每一個物體本身的，即任何一個物體都有自己的空間直角座標系。當然如果父級物體沿着自己的軸轉動，就會出現子級相對父級的軸旋轉的效果。
練習：寫一個旋轉木馬