前言
說到2d與3d的轉(zhuǎn)換，到底什么是2d，什么又是3d，看下圖：
所謂的2d和3d就是我們理解的二維空間和三維空間，那么什么是二維空間，什么又是三維空間呢？
二維空間：二維空間就是一個(gè)平面，我們?nèi)粘Ｉ钪兴赖亩S坐標(biāo)系，就是用來解讀二維空間的，看圖中有x，y，z三個(gè)軸，我們只需要看X軸和Y軸，而X軸和Y軸所構(gòu)成的就叫做二維坐標(biāo)系，而2d轉(zhuǎn)換就是基于二位坐標(biāo)系變換的
三維空間：三維空間是基于二維空間上又加了一條Z軸，我們所處的空間就是三維的空間，我們學(xué)到的3d轉(zhuǎn)換，就是基于三維坐標(biāo)系的
當(dāng)我們弄懂了什么是2d什么又是3d的時(shí)候，我們想到什么是變，基于2d和3d又是怎樣的變法；
一、2D形變：transform
2d形變共有4個(gè)屬性：
translate（位移）
rotate（旋轉(zhuǎn)）
scale（縮放）
skew（傾斜）
1.1 translate
在2D形變中，位移translate有兩個(gè)參數(shù)，就是沿著x，y軸位移的距離。
.box{
transform:translate(100px,100px);
}
.box{
transform:translateX(100px);
}
.box{
transform:translateY(100px);
}
.box{
transform:translate(100px);
}
以上設(shè)置的四個(gè)樣式，它們的表現(xiàn)形式分別是，第一個(gè)元素向右向下各移動(dòng)100px，第二個(gè)元素向右移動(dòng)100px，第三個(gè)元素向下移動(dòng)了100px，第四個(gè)元素向右移動(dòng)了100px，translate不指定方向的時(shí)候設(shè)置一個(gè)值只會(huì)對x軸生效；
1.2 rotate
在2D形變中，rotate有一個(gè)參數(shù)，就是旋轉(zhuǎn)的角度，注意這里的旋轉(zhuǎn)是順時(shí)針的。
.box{
transform:rotate(45deg);
}
.box{
transform:rotate(-45deg);
}
上面的代碼設(shè)置以后，第一個(gè)元素會(huì)順時(shí)針旋轉(zhuǎn)45度，第二個(gè)逆時(shí)針旋轉(zhuǎn)45度；
1.3 scale
在2D形變中，scale有兩個(gè)參數(shù)，就是沿著x，y軸縮放的比例，這個(gè)值小于1代表縮小。
.box{
transform:scaleX(2);
}
.box{
transform:scaleY(0.5);
}
.box{
transform:scale(1.5);
}
上面的代碼表示，第一個(gè)元素沿著X軸的方向會(huì)放大兩倍，也就是寬度放大兩倍，第二個(gè)元素沿著Y軸放大0.5倍也就是高度縮小兩倍，第三個(gè)元素整體放大1.5倍；
1.4 skew
這個(gè)屬性是2d形變中的屬性，所以只有兩個(gè)參數(shù)，分別表示沿著x軸和y軸的2d傾斜角度；這個(gè)屬性需要注意是，在傾斜的時(shí)候，元素里的文字也會(huì)跟著傾斜。
二、3D形變
3d形變有三個(gè)屬性：
translate
scale
rotate
是不是和2d形變差不多呢？是的，兩者差別不大，但是3d多了很多2d沒有的東西。
首先我們要知道幾個(gè)概念：
景深：perspective:屬性包括兩個(gè)屬性：none和具有單位的長度值。其中perspective屬性的默認(rèn)值為none，表示無限的角度來看3D物體，但看上去是平的。另一個(gè)值<length>
接受一個(gè)長度單位大于0的值。而且其單位不能為百分比值。<length>
值越大，角度出現(xiàn)的越遠(yuǎn)，從而創(chuàng)建一個(gè)相當(dāng)?shù)偷膹?qiáng)度和非常小的3D空間變化。反之，此值越小，角度出現(xiàn)的越近，從而創(chuàng)建一個(gè)高強(qiáng)度的角度和一個(gè)大型3D變化。
比如你站在10英尺和1000英尺的地方看一個(gè)10英尺的立方體。在10英尺的地方，你距離立方體是一樣的尺寸。因此視角轉(zhuǎn)變遠(yuǎn)遠(yuǎn)大于站在1000英尺處的，立體尺寸是你距離立方體距離的百分之一。同樣的思維適用perspective的<length>值;
這上面說的一堆不知道是不是人話，我理解的景深就是你的眼睛距離屏幕的大??；
transform-style：preserve-3d；屬性是3D空間一個(gè)重要屬性，表示所有子元素在3D空間中呈現(xiàn)。
視覺中心點(diǎn)：指的是我們的視野在一個(gè)平面中的中心點(diǎn)，在3d轉(zhuǎn)換中，視覺中心點(diǎn)是可以控制的。
perspective-origin:center center;(默認(rèn)值)
可以設(shè)置x方向和y方向，單位可以是px百分比 top center bottom right left
旋轉(zhuǎn)中心點(diǎn)：
transform-origin:center center 0;(默認(rèn)值)
前面我們寫過xy方向上的，今天多了一個(gè)z軸，第三個(gè)值就是z軸默認(rèn)值是0；
2.1 translate
3d中，位移多了一個(gè)方向，z軸的方向，translateZ（100px）表示元素向Z軸移動(dòng)100px；
2.2rotate
在2d中旋轉(zhuǎn)是只有繞著中心點(diǎn)旋轉(zhuǎn)的，在3d中多了x軸和y軸，其中，箭頭指向我們的順時(shí)針是正的，逆時(shí)針是負(fù)的；
2.3scale
縮放也是在2d的基礎(chǔ)上加了一個(gè)在z軸上縮放，這里主要聲明一下z軸的縮放：
在z軸上的縮放，我理解的是，把z軸方向的空間密度改變了，如果同樣是100px 在scaleZ（2）的基礎(chǔ)上，100px同樣是100px這個(gè)數(shù)據(jù)但是100px變大了。
