transform 3D 空間轉換

transform 這個屬性的強大之處在于它可以把一個二維的空間轉化成一個三維的空間，給視覺設計師更多的發揮空間，也給用戶帶來更好的視覺體驗。

1. 官方定義

transform 屬性向元素應用 3D 轉換。屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

2. 慕課解釋

當給元素使用 transform 之后，它就可以在它原來所在的位置變成一個向任意空間變換的元素，這里可以通過在 Z 軸上的設置，讓他在空間上呈現 3D 效果。

3. 語法

transform: none|transform-functions;

3D 空間坐標軸

我們在 transform2D 中已經對平面屬性做了詳細的介紹，本章節主要是其 3D 屬性，這些屬性的使用需要在父級設置 perspective 和 transform-style

讓父級有了透視效果以及設置父級在內部空間的呈現方式。

4. 兼容性

5. 實例

通用 html ：

<div class="common demo">transfrom3d</div>
<div class="common demo-3d">transfrom3d</div>

通用 style ：

body{
    perspective: 500px;
}
.common{
    width:100px;
    height:100px;
    text-align: center;
    line-height: 100px;
    background:#f2f2f2;
    border:1px solid #ccc;        
    position: absolute;     
    top: 0;
    left: 0;
    
}
.demo{
    z-index: 1;   
    opacity: .5;       
    background: red;     
}

1. demo-3d 在 z 坐標軸向內延伸 100px。

.demo-3d{
    transform:translate3d(0 ,0 ,-100px);
}

效果圖

說明： 紅色背景是 demo-3d 原來的位置，我們通過圖片看到它的表現是水平向右移動且縮小了，其實他是進行了 3D 空間的移動。

2. demo-3d 在 z 軸空間上縮放。

.demo-3d{
    transform:scale3d(1 ,1 ,0);
}

效果圖

說明： scale3d 這個屬性可以拆成 scaleX() 、scaleY() 、 scaleZ() 。我們發現 scaleZ() 在 3D 空間變化上，它的區間 0~1 是不起作用的，只有 0 代表縮小到 0（消失）， 1 (不變)。

3. demo-3d 在 z 軸上旋轉。

.demo-3d{
    transform: rotate3d(0,0,1,45deg);
}

效果圖

說明： 不推薦使用 rotate3d() 這個屬性，因為它只能通過 0 或 1 去選擇是否需要旋轉，第 4 個參數給 1 個旋轉角度，這種方式很不靈活，不過它的特性就是可以同時控制 x，y，z 方向上的旋轉角度。

其實我們從 1～3 這 3 個例子中看到只設定了其中一項，接下來我們全方位的變化。

4. 在 x，y，z 上應用 translate3d 和 rotateZ

.demo-3d{
    transform:translate3d(100px  ,100px ,-100px) rotateZ(45deg);
}

效果圖：

5.寫一個墻角效果

<div class="cude">   
        <div class="common left">left</div>         
        <div class="common right">right</div>
        <div class="common bottom">bottom</div>
</div> 

.cude {  
    perspective: 1500px;
    width:200px;   
    height:200px;   
    position: relative;  
    margin: 100px auto;   
    transform-style: preserve-3d;   
    transform: rotateX(-14deg) rotateY(-45deg); 
}       
.common {   
    position: absolute;   
    top: 0;   
    left: 0;   
    width: 200px;   
    height: 200px;   
    background:#666;   
    opacity: 0.8;   
    font-size:20px;   
    text-align: center;   
    line-height:200px;   
    font-weight: bold;   
    color:#fff;   
    border:1px solid #fff;   
}       
.right {   
    transform: rotateY(180deg) translateZ(101px);
    background: rosybrown;

}    
.left {   
    transform: rotateY(-90deg) translateZ(101px);
    background: rosybrown;
}          
.bottom {   
    transform: rotateX(90deg) translateZ(-100px);
}   

效果圖

說明： 寫這個其實沒有什么技巧，首先設置 transform-style: preserve-3d; 然后在理解每個面相對角度的基礎上去設置 translateZ 和 rotate3d.

6. 經驗分享

1. 我們如果是初學 transform，這里介紹一個區分旋轉角度方向的方法，也就是左手法則，我們左手指向設置旋轉坐標的正向，例如 z 軸，左手只向屏幕外，手指自然彎曲的方向就是旋轉的方向。

2. 我們通常旋轉 都是以中心點為起點開始旋轉的，這往往不是我們想要的方式，可以通過設置 transform-origin 這個屬性改變旋轉起始點的位置。

transform-origin: 50% 50% 0;   

上面設置代表在元素的水平面的中心位置。

transform-origin: 0 50% 0;   

上面這個設置代表在元素 top 的中心位置。

transform-origin: 50% 0  0;   

上面這個設置代表在元素 left 的中心位置。

3. 如果我們在實際工作中遇到改變元素的位置，例如拖拽這些使用 transform:translate3D(x,y,z) 可以提高瀏覽器的性能，而且它的位置變化不會改變頁面中其它元素的位置。

7. 小結

rotateX、rotateY這些是 3D 空間的變化，不可以出席在 2D 空間上面。