## [本節參考張鑫旭](http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/) ### 1.perspective透視 * CSS3 3D transform的**透視點是在瀏覽器的前方** 實現3d效果有兩種寫法 ``` <div class="parent"> <div class="child"> </div> </div> ``` ``` //1.給父元素透視 .parent{ //保留3d效果 transform-style:preserve-3d perspective:300px; } ``` ``` //2.用在當前動畫元素上 .child{ transform: perspective(600px) rotateY(45deg); } ``` ### 2.3D transform中有下面這三個方法： * `rotateX( angle )` * `rotateY( angle )` * `rotateZ( angle )` * 這三個樣式可以幫助理解三位坐標 單杠運動是`rotateX`  鋼管舞 rotateY  轉盤rotateZ ### 3.translateZ幫你尋找透視位置 ### 近大遠小,translateZ\(\)的值設置的越小,視覺上里我們就越遠 在線demo [https://gitee.com/frontendLol/cssJiaoCheng/blob/master/04translateZ.html](https://gitee.com/frontendLol/cssJiaoCheng/blob/master/04translateZ.html)