transform 3D 空間轉(zhuǎn)換

transform 這個(gè)屬性的強(qiáng)大之處在于它可以把一個(gè)二維的空間轉(zhuǎn)化成一個(gè)三維的空間，給視覺(jué)設(shè)計(jì)師更多的發(fā)揮空間，也給用戶帶來(lái)更好的視覺(jué)體驗(yàn)。

1. 官方定義

transform 屬性向元素應(yīng)用 3D 轉(zhuǎn)換。屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

2. 慕課解釋

當(dāng)給元素使用 transform 之后，它就可以在它原來(lái)所在的位置變成一個(gè)向任意空間變換的元素，這里可以通過(guò)在 Z 軸上的設(shè)置，讓他在空間上呈現(xiàn) 3D 效果。

3. 語(yǔ)法

transform: none|transform-functions;

3D 空間坐標(biāo)軸

我們?cè)?transform2D 中已經(jīng)對(duì)平面屬性做了詳細(xì)的介紹，本章節(jié)主要是其 3D 屬性，這些屬性的使用需要在父級(jí)設(shè)置 perspective 和 transform-style

讓父級(jí)有了透視效果以及設(shè)置父級(jí)在內(nèi)部空間的呈現(xiàn)方式。

4. 兼容性

5. 實(shí)例

通用 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 坐標(biāo)軸向內(nèi)延伸 100px。

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

效果圖

說(shuō)明： 紅色背景是 demo-3d 原來(lái)的位置，我們通過(guò)圖片看到它的表現(xiàn)是水平向右移動(dòng)且縮小了，其實(shí)他是進(jìn)行了 3D 空間的移動(dòng)。

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

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

效果圖

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

3. demo-3d 在 z 軸上旋轉(zhuǎn)。

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

效果圖

說(shuō)明： 不推薦使用 rotate3d() 這個(gè)屬性，因?yàn)樗荒芡ㄟ^(guò) 0 或 1 去選擇是否需要旋轉(zhuǎn)，第 4 個(gè)參數(shù)給 1 個(gè)旋轉(zhuǎn)角度，這種方式很不靈活，不過(guò)它的特性就是可以同時(shí)控制 x，y，z 方向上的旋轉(zhuǎn)角度。

其實(shí)我們從 1～3 這 3 個(gè)例子中看到只設(shè)定了其中一項(xiàng)，接下來(lái)我們?nèi)轿坏淖兓?/p>

4. 在 x，y，z 上應(yīng)用 translate3d 和 rotateZ

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

效果圖：

5.寫(xiě)一個(gè)墻角效果

<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);
}   

效果圖

說(shuō)明： 寫(xiě)這個(gè)其實(shí)沒(méi)有什么技巧，首先設(shè)置 transform-style: preserve-3d; 然后在理解每個(gè)面相對(duì)角度的基礎(chǔ)上去設(shè)置 translateZ 和 rotate3d.

6. 經(jīng)驗(yàn)分享

1. 我們?nèi)绻浅鯇W(xué) transform，這里介紹一個(gè)區(qū)分旋轉(zhuǎn)角度方向的方法，也就是左手法則，我們左手指向設(shè)置旋轉(zhuǎn)坐標(biāo)的正向，例如 z 軸，左手只向屏幕外，手指自然彎曲的方向就是旋轉(zhuǎn)的方向。

2. 我們通常旋轉(zhuǎn) 都是以中心點(diǎn)為起點(diǎn)開(kāi)始旋轉(zhuǎn)的，這往往不是我們想要的方式，可以通過(guò)設(shè)置 transform-origin 這個(gè)屬性改變旋轉(zhuǎn)起始點(diǎn)的位置。

transform-origin: 50% 50% 0;   

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

transform-origin: 0 50% 0;   

上面這個(gè)設(shè)置代表在元素 top 的中心位置。

transform-origin: 50% 0  0;   

上面這個(gè)設(shè)置代表在元素 left 的中心位置。

3. 如果我們?cè)趯?shí)際工作中遇到改變?cè)氐奈恢?，例如拖拽這些使用 transform:translate3D(x,y,z) 可以提高瀏覽器的性能，而且它的位置變化不會(huì)改變頁(yè)面中其它元素的位置。

7. 小結(jié)

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