2d轉換的方法：
1、移動 translate(x, y) 可以改變元素的位置，x、y可為負值；
2、縮放 scale(x, y) 可以對元素進行水平和垂直方向的縮放，x、y的取值可為小數，不可為負值；
4、旋轉 rotate(deg) 可以對元素進行旋轉，正值為順時針，負值為逆時針；
5、傾斜 skew(deg, deg) 可以使元素按一定的角度進行傾斜
2d轉換的屬性：
用法：例如：
div較難理解部分的分析
2d轉換的移動規則和相對定位類似，即無論元素移動到**，她的原始位置一直被他佔據著。
skew 傾斜
用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
引數表示傾斜角度，單位deg
首先需要說明的是skew的預設原點transform-origin是這個物件的中心點
看圖：
transform-origin 基準點
在使用transform方法進行文字或影象的變形時，是以元素的中心點為基準點進行的。使用transform-origin屬性，可以改變變形的基準點。
用法：transform-origin: 10px 10px;
共兩個引數，表示相對左上角原點的距離，單位px，第乙個引數表示相對左上角原點水平方向的距離，第二個引數表示相對左上角原點垂直方向的距離；
兩個引數除了可以設定為具體的畫素值，其中第乙個引數可以指定為left、center、right，第二個引數可以指定為top、center、bottom。
想深入理解3d轉換的原理 可以參考 張鑫旭css3 3d轉換
首先腦子裡要有3d座標圖
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定義 3d 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3d 轉化。
translatex(x) 定義 3d 轉化，僅使用用於 x 軸的值。
translatey(y) 定義 3d 轉化，僅使用用於 y 軸的值。
translatez(z) 定義 3d 轉化，僅使用用於 z 軸的值。
scale3d(x,y,z) 定義 3d 縮放轉換。
scalex(x) 定義 3d 縮放轉換，通過給定乙個 x 軸的值。
scaley(y) 定義 3d 縮放轉換，通過給定乙個 y 軸的值。
scalez(z) 定義 3d 縮放轉換，通過給定乙個 z 軸的值。
rotate3d(x,y,z,angle) 定義 3d 旋轉。
rotatex(angle) 定義沿 x 軸的 3d 旋轉。
rotatey(angle) 定義沿 y 軸的 3d 旋轉。
rotatez(angle) 定義沿 z 軸的 3d 旋轉。
perspective(n) 定義 3d 轉換元素的透視檢視。
如果說rotatex/rotatey/rotatez可以幫助理解三維座標，則translatez則可以幫你理解透視位置。
我們都知道近大遠小的道理，對於沒有rotatex以及rotatey的元素，translatez的功能就是讓元素在自己的眼前或近或遠。比方說，我們設定元素perspective為201畫素，如下：
perspective: 201px;則其子元素，設定的
translatez值越小，則子元素大小越小（因為元素遠去，我們眼睛看到的就會變小）；translatez值越大，該元素也會越來越大，當translatez值非常接近201畫素，但是不超過201畫素的時候（如200畫素），該元素的大小就會撐滿整個螢幕（如果父輩元素沒有類似overflow:hidden的限制的話）。因為這個時候，子元素正好移到了你的眼睛前面，所謂「一葉蔽目，不見泰山」，就是這麼回事。當translatez值再變大，超過201畫素的時候，該元素看不見了——這很好理解：我們是看不見眼睛後面的東西的！
參考部落格 張鑫旭css3 3d轉換
perspective-origin這個屬性超級好理解，表示你那雙色迷迷的眼睛看的位置。預設就是所看舞台或元素的中心。有時候，我們對中心的位置是不感興趣的，希望視線放在其他一些地方。比方說
下面為立方體的實際應用透視效果圖：
perspective-origin: 25% 75%;在顯示世界中，我們無法穿過軟妹a看到其身後的軟妹b或c或d；但是，在css3的3d世界中，預設情況下，我們是可以看到背後的元素
因此，為了切合實際，我們常常會這樣設定，使後面元素不可見：
backface-visibility:hidden;例子 菜鳥教程
最後看乙個3d轉換的例子：的旋轉木馬效果demo
張鑫旭 好吧，css3 3d transform變換，不過如此！
css3 2d轉換3d轉換以及動畫的知識點彙總
2d轉換的方法 1 移動 translate x,y 可以改變元素的位置，x y可為負值 2 縮放 scale x,y 可以對元素進行水平和垂直方向的縮放，x y的取值可為小數，不可為負值 4 旋轉 rotate deg 可以對元素進行旋轉，正值為順時針，負值為逆時針 5 傾斜 skew deg,d...
css3 2d轉換3d轉換以及動畫的知識點彙總
2d轉換的方法 1 移動 translate x,y 可以改變元素的位置，x y可為負值 2 縮放 scale x,y 可以對元素進行水平和垂直方向的縮放，x y的取值可為小數，不可為負值 4 旋轉 rotate deg 可以對元素進行旋轉，正值為順時針，負值為逆時針 5 傾斜 skew deg,d...
css3 2d轉換3d轉換以及動畫的知識點彙總
2d轉換的方法 1 移動 translate x,y 可以改變元素的位置，x y可為負值 2 縮放 scale x,y 可以對元素進行水平和垂直方向的縮放，x y的取值可為小數，不可為負值 4 旋轉 rotate deg 可以對元素進行旋轉，正值為順時針，負值為逆時針 5 傾斜 skew deg,d...