1.旋轉 rotate
通過指定的角度引數對原元素指定乙個2d旋轉
語法：transform:rotate(< angle >);
angle：旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉
2.移動 translate
根據左（x）和頂（y）位置給定的引數，從當前元素位置移動
(1).translatex
語法：transform:translatex(value);
正數從左到右移動，負數從右到左移動
(2).translatey
語法：transform:translatey(value);
正數從上到下移動，負數從下到上移動
(3).translate
語法：transform:translate(value1,value2);
值1為必填，值2可以省略，只有乙個值時，第二個值預設為0，值為有單位的數值或百分比，座標原點在左上角
3.縮放 scale
指定物件的2d縮放
(1).scalex
語法：transform:scalex(number);
基準點是1，為原始尺寸
(2).scaley
語法：transform:scaley(number);
(3).scale
語法：transform:scale(number1,number2);
值1為必填，值2可以省略，只有乙個值時，x,y預設相等，可以保證不變形，等比例縮放，所以它的值不需要單位，座標原點在兩軸的中心點
4.扭曲 skew
指定物件斜切扭曲
(1).skewx
語法：transform:skewx(angle);
angle：角度為正時逆時針斜切，為負時順時針斜切
(2).skewy
語法：transform:skewy(angle);
angle：角度為正時順時針，為負時逆時針
(3).skew
語法：transform:skew(angle1,angle2);
angle：第二個值可省略，只有乙個值時，第二個預設為0
3d時：
x軸正方向為平面右邊，左邊為負
y軸正方向為平面下邊，上邊為負
z軸正方向為平面指向自己的方向，指向螢幕的方向為負
1.旋轉 rotate
語法：(1).transform:rotatex(angle); 圍繞x軸旋轉
(2).transform:rotatey(angle); 圍繞y軸旋轉
(3).transform:rotatez(angle); 圍繞z軸旋轉
(4).transform:rotate3d(x,y,z,angle); 前三個引數分別表示旋轉方向，第四個引數表示角度，引數不能省略，前三個引數只有0和非0的區別，大於0為正方向（順），小於0為負方向（逆），當有多個方向變化的時候，通常用小數如0.1來區分變化的程度
2.移動 translate
x和y同2d
(1).z軸如下
語法：transform:translatez(z); z表示z軸方向的乙個移動量
(2).transform:translate3d(x,y,z); 分別對應三個軸，引數不允許省略
3.縮放 scale
x和y同2d
(1).z軸如下
語法：transform:scalez(z); z表示z軸方向的乙個壓縮量
(2).transform:scale3d(x,y,z); 分別對應三個軸，引數不允許省略
transform-origin
解釋：允許更改轉換元素的座標位置
語法：transform-origin:x-axis y-axis z-axis; 2d中前兩個引數就可以
注：x-axis：定義檢視被置於 x 軸的何處。可能的值：left、center、right、length、%y-axis：定義檢視被置於 y 軸的何處。可能的值：top、center、bottom、length、%。transform-origin: right top;表示的是右上角。
1.2d矩陣matrix
transform:matrix(a,b,c,d,tx,ty);
注意書寫方向是豎直方向
轉換公式：x,y表示轉換元素的所有座標
目標矩陣說明：ax+cy+e為變換後的水平座標，bx+dy+f為變換後的垂直座標
注意：matrix在火狐瀏覽器下需要新增單位，webkit核心預設px，translate等方法需要加單位
矩陣移動：matrix(1,0,0,1,x,y)無論前面四個是什麼數字，等同於transform:translate(x,y) ，第五個和第六個數 。
矩陣縮放：matrix(sx,0,0,sy,0,0)------scale(sx,sy)，第乙個和第四個數
矩陣旋**matrix(cos0,sin0,-sin0,cos0,0,0)-------rotate(0deg)
矩陣拉伸：matrix(1,tan0y,tan0x,1,0,0)-------skew(0xdeg,0ydeg)
映象對稱：計算公式為：matrix((1-k * k) / (1+k * k), 2k / (1 + k * k), 2k / (1 + k * k), (k * k - 1) / (1+k * k), 0, 0)
對稱軸一定通過元素變換的中心點，k是對稱軸的斜率
2.3d矩陣
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
1.transform-style
語法：transform-style:flat / preserve-3d; 預設值：flat
2.perspective
解釋：指定觀察者與平面（z=0）的 距離，使具有三維位置變換的元素產生透視效果
語法：perspective:number / none; 預設值：none
3.perspective-origin
解釋：指定透視點的位置
語法：perspective-origin:x-axis y-axis; 預設值：50% 50%；
4.backface-visibility
解釋：指定元素背面面向使用者時是否可見
語法：backface-visibility:visible / hidden; 預設值：visible
CSS3 轉換和變形
以下列出了所有的轉換屬性 property 描述transform 適用於2d或3d轉換的元素 transform origin 允許您更改轉化元素位置 2d 轉換方法 函式描述 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。translate x,y 定義 2d 轉換，...
CSS3轉換和動畫
2d轉換 transform屬性 屬性值有 translate 平移，單位px rotate 旋轉，單位deg scale 縮放，給定倍數 skew 翻轉，根據x軸，y軸，單位deg matrix 函式式，自定義 3d轉換 transfrom屬性 屬性值rotatex 單位deg rotatey 單...
css3 轉換 旋轉 過渡 動畫
css3 轉換 旋轉 過渡 動畫 轉換 transform 轉換 translate x,y 位移 translatex 設定水平方向位移 translatey 設定垂直方向位移 旋轉 rotate 旋轉 transform rotate 45deg scale 縮放 transform scale...