CSS 樣式CSS3 transform-function matrix 變形矩陣(旋轉、傾斜、縮放)

CSS3 transform matrix(a, b, c, d, tX, tY) 變形矩陣

transform : matrix( 1, 0, 0, 1, 0, 0 ) 初始的值(參數為數字,不需要單位)

使用 CSS3 transform-function 之特性控制元素的旋轉、傾斜、縮放、移動。
其中 matrix 綜合了複雜的變形,矩陣的數值不容易直覺的方式來計算,介由其中六個參數單獨變化來體會特性。需要在 IE10+ 才能顯示其支援完整、IE8 之前則會有錯誤(需加入瀏覽器偵測語法)。

e
a 縮放(scale X)1
d 縮放(scale Y)1
c 傾斜(skew X)0
b 傾斜(skew Y)0
tX 移動(move X)0
tY 移動(move Y)0
origin 原點 X-axis0
origin 原點 Y-axis0

CSS STYLE

transform : matrix( 1, 0, 0, 1, 0, 0 ); transform-origin : 0% 0%;