前言
說到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變大了。
