css3中新增了2d變換和3d變換的特性，可以在不使用js操作動畫的前提下，對元素做基本的變換，包括：平移、縮放、旋轉、和傾斜。此外，還提供了：2d轉換基點（transform-orgin）、3d視點（perspective-origin）、視距（perspective）等屬性，為變換提供更多可能性。
在學習的過程中，遇到了幾個難點，在查詢資料，總結整理後得出幾點心得。
在正式開始之前，先讓我們來看一張圖：
如上圖所示，乙個三維空間有三個方向，在每個方向上加上一條軸線，在兩端標上箭頭，並為其規定正方向與負方向（實際開發中，xy軸相交的平面就是電腦螢幕，z軸是一條穿過螢幕向外的線）；三條軸線的交點作為座標原點，記為座標o（0,0,0）。接下來，該三維空間中的任意一點，都能用三個數字組成的集合來表示，如：座標（1,4,7）表示該點在x軸、y軸、z軸上的垂直投影點，與座標原點o的距離分別是1、4、7。注意：該座標系與數學中的「笛卡爾座標系」的y軸方向正好相反。
也許你會奇怪，「為什麼我要在這裡提什麼座標系，這不是數學的東西嗎」，其實，css3的2d與3d變換與數學的關係非常大，可以說就是數學中立體幾何的一種表現形式，理解上圖有助於我們更加深入得理解css3變換。
對於旋轉和傾斜變化，最重要的便是他們的預設變換方向。
對於旋轉變換，其預設是沿著基準軸正方向（由使用的旋轉方法決定，如：rotatex()的基準軸就是x軸）做順時針變換。將上圖中黑色邊框包圍的平面看做乙個元素，以x軸作為基準軸；此時，若將元素旋轉（+）30°，即是將黑色平面固定在x軸上，將y軸正方向的一邊往上掀起來（就像掀起一塊木板，被掀起的木板仍然在乙個平面內，而不會像翻書一樣發生彎曲）。rotatey()同理。rotatez()相當於2d變換的rotate()方法，就是將元素順時針轉動。具體的變換情況如下所示：
rotatex
rotatey
rotatez
對於傾斜變換，x軸和y軸方向相反。skewx()是將元素的垂直邊逆時針（也就是向左）傾斜，而skewy()是將元素的水平邊順時針（也就是向下）傾斜。具體的變換情況如下所示：
skewx
skewy
預設地，css3變換的基點是元素的中心點，即：進行變換（僅限旋轉、傾斜和縮放）後，元素中心點的座標不變，例如：元素初始位置與螢幕左上角重合，寬高均為100px，旋轉30°後，元素中心點座標仍然是（50,50）。
視點是另一種基點，它只用於3d變換。理解視點，可以借助於透視思想。我們應該對這局話都有印象--「兩條平行直線在無窮遠處相交」。三維空間中的直線原本不可能相交，在無窮遠處也一樣，但投射到人眼中，原本平行的直線因產生「透視」現象，會不斷相互接近，直到交於一點。
不過，視點並不是線的交點，上圖中的視點，其實是在平面的最外面，也就是在中間的立方體衝向螢幕外面的表面上。css的視點原理相同，只不過是模擬人眼在某個位置時，能夠看到的該元素當時的樣子，也就是能夠像上圖中不同位置的立方體，在人眼位於「視點」時，會呈現不同的表面讓人看到，視點就是用於模擬這種三維的元素呈現方式的乙個屬性。
而另外乙個不得不說的屬性就是視距了。顧名思義，視距就是物體距離視點的距離。根據「透視」原理，物體會呈現近大遠小的特點，當元素足夠近而又大到足夠遮擋人眼，人就不能看到其他東西了；當元素足夠遠，那麼它將會顯示的非常小，甚至看不見。perspective屬性需要與translatez()方法配合「食用」，為父元素設定perspective，同時，向子元素應用translatez()方法，即：父元素用於模擬人眼位置，子元素就是你要看的物體。未對子元素應用translatez()方法時，相當於translatez(0)，元素顯示它原本的大小；平移的距離越接近視距（不超過），元素就呈現地越大；反之，越小；而當平移距離超過視距後，元素就消失了，相當於物體跑到了人眼後方，自然就看不到了。perspective的工作原理是以元素設定的原本大小作為元素在視距處的大小，因此，平移(+)的距離，元素會變大；平移(-)的距離，元素就能變小，但必須是設定了視距的情況下才有效。
此外，如上面透檢視中所示，不同位置的物體會呈現不同的樣子。在css中，想要實現這樣的效果，可以為父元素設定視距，然後給多個子元素應用變換，效果如下所示：
box1
box2
box3
當元素恰好與視點平行時，元素會消失（因為元素沒有厚度這一屬性）。
下面是對僅子元素應用視距時呈現地樣子：
box1
box2
box3
此時，子元素各自有自己的視點，而不是共享乙個視點，所以所有子元素呈現地樣子都是一樣的。
理解了以上的概念後，實現一些複雜的圖形變換就能相對容易了。
3d變換 Css 筆記
transform rotate 45deg 中心旋轉45度 transform origin top center left right bottom 百分比 百分比時，第乙個值為從左到右，第二個值為從上到下 例 transform origin 100 50 表示的位置是乙個盒子的最右邊的中點 ...
css 2D變換與3D動畫
過渡 1 只關心元素的初始狀態和結束狀態，不能獲取元素在過渡中每一幀的狀態。2 在元素首次渲染還沒有完成的情況下,不會觸發過渡 3 在絕大部分變換樣式切換時,如果變換函式的位置個數不相同也不會觸發過渡 transition property 指定過渡動畫的屬性 transition duration...
3D空間變換
它相當於是平移變換 t 和旋轉變換 r 的復合，等距變換前後長度，面積，線線之間的角度都不變。自由度 6 旋轉變換r自由度 3，平移變換t自由度 3 t rt0t 1 t begin r t 0 t 1 end t r0t t1 4x4矩陣 eigen isometry3d eigen isomet...