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

CSS3 Transform 變形矩陣用於在網頁二維或三維空間中轉換元素位置、大小和形狀的技術。基於矩陣運算,可以通過指定的旋轉、縮放、平移和斜切操作的矩陣來實現變換效果,例如平移矩陣、縮放矩陣、旋轉矩陣、斜切矩陣、透視矩陣、用於在三維空間中模擬透視效果。

transform : matrix( 1, 0, 0, 1, 0, 0 ) 初始的值

(參數為數字,不需要單位)

使用 CSS3 transform-function 之特性控制元素的旋轉、傾斜、縮放、移動。
其中 matrix 綜合了複雜的變形,矩陣的數值不容易直覺的方式來計算,介由其中六個參數單獨變化來體會特性。

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%;


CSS3 Transform Matrix 變形矩陣是二維或三維的矩陣,可以在網頁設計中用來對網頁 html 元素進行平移、縮放、旋轉、傾斜等操作,並且可以在網頁二維或三維空間中轉換元素位置。