transform 適應於對任一dom元素的2d或3d轉換,轉換效果有:旋轉、拉伸、平移、傾斜等。
目前瀏覽器並不是完全支援所有的transform ，
ie9、 firefox 和 opera 僅支援2d transforms ，相應的css定義為：-ms-transform 、-moz-transform 和-o-transform ，
而safari 和chrome 都支援2d和3d transforms ，相應的css定義為：
-webkit-transform
該屬性的值主要有如下：
value
description
none
定義這不需要轉換
matrix(n,n,n,n,n,n)
使用有6個值的矩陣(matrix)來定義乙個 2d 轉換
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
使用有4*4的矩陣(matrix)來定義乙個 3d 轉換
translate(x,y)
定義乙個2d 轉換,x:水平位移,y:垂直位移,個人覺得和margin-left(left) 和margin-top(top)類似.
translate3d(x,y,z)
定義乙個2d 轉換,x:水平位移,y:垂直位移,z:z方向的位移
translatex(x)
定義乙個水平方向2d 轉換
translatey(y)
定義乙個垂直方向2d 轉換
translatez(z)
定義乙個z方向3d 轉換
scale(x,y)
定義乙個2d 拉伸, x:水平拉伸,y:垂直拉伸
scale3d(x,y,z)
義乙個3d 拉伸, x:水平拉伸,y:垂直拉伸,z:z方向的拉伸
scalex(x)
定義乙個水平方向拉伸
scaley(y)
定義乙個垂直方向拉伸
scalez(z)
定義乙個z方向的拉伸
rotate(angle)
定義乙個 2d 旋轉, angle :旋轉角度(deg)
rotate3d(x,y,z,angle)
定義乙個 3d 旋轉,
rotatex(angle)
定義乙個x軸3d旋轉
rotatey(angle)
定義乙個y軸3d旋轉
rotatez(angle)
定義乙個z軸3d旋轉
skew(x-angle,y-angle)
定義乙個x軸和y軸的2d 傾斜
skewx(angle)
定義乙個x軸的2d 傾斜
skewy(angle)
定義乙個y軸的2d 傾斜
perspective(n)
定義乙個3d轉換效果和透檢視
transform-origin配合transform，目的是定義元素旋轉的位置
語法：transform-origin: x-axis y-axis z-axis;
說明：property value
description
x-axis
定義x軸的轉換位置. 可能的值有:
y-axis
定義y軸的轉換位置. 可能的值有:
z-axis
定義z軸的轉換位置. 可能的值有:
預設值：50% 50%，效果等同於center center
可取值的定義：
：用百分比指定座標值。可以為負值。可以是純數字或者數字加百分比
：用長度值指定座標值。可以為負值。必須是數字加單位(如px)
left：
指定原點的橫座標為left
center①：
指定原點的橫座標為center
right：
指定原點的橫座標為right
top：
指定原點的縱座標為top
center②：
指定原點的縱座標為center
bottom：
指定原點的縱座標為bottom
Css3 動畫效果
相關作品 最近看了比較多的動畫效果，想做些自己感興趣的作品，遇到以下問題，記錄下來 1.簡單的動畫主要用transition和transform 2.滑鼠放上去產生的效果，before和after顯示寫法如下 item style3 hover before 3.關於3d動畫效果，要顯示出來，需要新...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...