必不可少的perspective屬性
perspective屬性的存在與否決定了你所看到的是2次元的還是3次元的，也就是是2D transform還是3D transform. 這不難理解，沒有透視，不成3D.
不過CSS3 3D transform中的透視的透視點與上面的示例圖是不同的：CSS3 3D transform的透視點是在瀏覽器的前方！
顯示器中3D效果元素的透視點在顯示器的上方（不是后面），近似就是我們眼睛所在方位！
translateZ幫你尋找透視位置
如果說rotateX/rotateY/rotateZ可以幫助理解三維坐標(biāo)，則translateZ則可以幫你理解透視位置。
我們都知道近大遠(yuǎn)小的道理，對于沒有rotateX以及rotateY的元素，translateZ的功能就是讓元素在自己的眼前或近或遠(yuǎn)。
比方說，我們設(shè)置元素perspective為201像素，如下：
perspective: 201px;
則其子元素，設(shè)置的translateZ值越小，則子元素大小越小（因為元素遠(yuǎn)去，我們眼睛看到的就會變小）；translateZ值越大，該元素也會越來越大，當(dāng)translateZ值非常接近201像素，但是不超過201像素的時候（如200像素），該元素的大小就會撐滿整個屏幕（如果父輩元素沒有類似overflow:hidden的限制的話）。因為這個時候，子元素正好移到了你的眼睛前面，所謂“一葉蔽目，不見泰山”，就是這么回事。當(dāng)translateZ值再變大，超過201像素的時候，該元素看不見了——這很好理解：我們是看不見眼睛后面的東西的！
perspective屬性的兩種寫法
- html：
<section class="container dark-red">
<div class="box"></div>
</section>
<section class="container dark-blue">
<div class="box"></div>
</section>
- css
.container{
display: block;
width: 200px;
height: 200px;
margin-bottom: 50px;
border: 1px solid #bbb;
}
.box{
width: 100%;
height: 100%;
opacity: .75;
}
**寫法1（子元素設(shè)定視角）
.dark-red .box{
background-color: darkred;
transform: perspective(600px) rotateY(45deg);
}
**寫法2（父元素設(shè)定視角）
.dark-blue{
perspective:600px;
}
.dark-blue .box {
background-color: darkblue;
transform: rotateY(-45deg);
}
具體Demo地址：https://jsfiddle.net/codeice/rLc1jg88/
上面的demo上下兩個效果之所以會一樣，是因為舞臺上只有一個元素，因此，發(fā)生了巧合，其正好表現(xiàn)一樣了。如果，如果舞臺上有很多個元素，則兩種書寫形式的表現(xiàn)差異就會立馬顯示出來了！
如圖：
圖1：以父容器為透視元素
因此，顯然，我們看到的每個子元素的形體都是不一樣的
圖2： 每個元素都有自己的一個視點，因此，顯然，因為rotateY的角度是一樣的，因此，看上去的效果也就一模一樣了！
perspective-origin: x-position y-position;
perspective-origin這個屬性其實就是好表示你那雙眼睛所看的位置。默認(rèn)就是所看舞臺或元素的中心。有時候，我們對中心的位置是不感興趣的，希望視線放在其他一些地方。
transform-style:preserve-3d
transform-style屬性也是3D效果中經(jīng)常使用的，其兩個參數(shù)，flat|preserve-3d. 前者flat為默認(rèn)值，表示平面的；后者preserve-3d表示3D透視(標(biāo)明其子元素會被定位在這3d空間內(nèi))
backface-visibility：visible/hidden;
Hide the backside of a rotated <div> element:
隱藏或顯示旋轉(zhuǎn)元素背后的元素
