CSS3打造3D效果——perspective transform的深度剖析

聲明：此篇博文雖是自己手寫，但大量資源取自 張鑫旭 的博文。想看更詳細 更專業的剖析請看張鑫旭的博文。

昨天對css3的transform做了初步的分析和認識，突然看到perspective屬性，調了半天沒看出任何效果，於是開始百度... ...

度了半天發現perspective這玩意是做3D效果的，但為甚我做demo楞沒看出perspective加上去有任何3D。拜讀過 張鑫旭 的博文后才了解perspective是透視(學美術，建築的肯定懂，不懂得我也解釋的不專業，個人理解為景深)。既然perspective是透視，從理解上說就應該用在場景樣式上，場景有了透視元素就能做3D特效了。

先來看看perspective的作用

CSS代碼

        .box{
            border:solid 1px #000;
            box-sizing:content-box;
            margin:100px auto;
            width:1000px;
            height:300px;
            /* 重點看這里 */
            perspective:800px; 
        }
        .child{
            box-sizing:content-box;
            width:300px;
            height:300px;
            float:left;
            margin-left:5px;
            background-color:#87D30A;
            /* 重點看這里 */
            transform:rotateY(95deg);
        }

HTML代碼

    <div class="box">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div style="clear:both;"></div>
    </div>

從這個demo看box父元素上有perspective，child子元素Y軸旋轉95度。從效果看可以想象這三個div的透視可以有一個交點，且這個交點看起來在第二個div附近。

接着，嘗試調整perspective的值，從原來的800px調整到4000px，也就是原來的5倍。其他屬性不變，看看效果。

調整了perspective后發現div旋轉幅度變大了，且透視焦點轉移到了第一個div附近。通過這個調整發現，改變perspective的值透視焦點會發生改變。

        .box{
            border:solid 1px #000;
            box-sizing:content-box;
            margin:100px auto;
            width:900px;
            height:300px;
            /* 重點看這里 */
            perspective:800px;
            transition:all 1.5s;
        }
        .box:hover{
            /* 重點看這里 */
            perspective:5px;
        }
        .child{
            box-sizing:content-box;
            width:300px;
            height:300px;
            float:left;
            background-color:#87D30A;
            /* 重點看這里 */
            transform:rotateY(110deg) translateX(150px);
        }

通過這個demo可以證實perspective的值影響透視焦點的位置。

借一張圖

這就是3D世界的坐標圖。而perspective在Z軸上，而perspective是設置Z軸的長度。在css3中只有設置了perspective的值元素才會有Z軸，perspective為none元素則沒有Z軸(就是2D元素)。

rotateZ:div圍繞Z軸旋轉，以div中心點為軸心旋轉

rotateX:div圍繞X軸旋轉，以div橫向中軸為軸心前后翻轉

rotateY:div圍繞Y軸旋轉，以div縱向中軸為軸心左右翻轉

rotate的三個值找到了3D坐標，接下來找找perspective透視焦點。

（待續... ...）