css3 transform来说Matrix2D

dom坐标系

坐标系.png

transform matrix [a,b,c,d,e,f] (左乘矩阵)

a  c  e
b  d  f
0  0  1

a b 作为 x轴基座标向量
c d 作为 y轴基座标向量
e f 分别为x轴 y轴偏移

偏移

e = 400
f = 300

transform:matrix(1,0,0,1,400,300);

偏移.png

旋转

a = 0.7071067811865476
b = -0.7071067811865476
c = 0.7071067811865476
d = 0.7071067811865476
注 2分之根号2 = 0.7071067811865476 = Math.sqrt(2) / 2

transform: matrix(0.7071067811865476,-0.7071067811865476,0.7071067811865476,0.7071067811865476,0,0);

旋转.png

缩放

a = 1.5
b = 0
c = 0
d = 1.5
e = 0
f = 0

transform: matrix(1.5,0,0,1.5,0,0);

缩放.png

剪切

a = 1
b= 0
c = 1
d = 1
e = 0
f = 0

transform: matrix(1,0,1,1,0,0);

剪切.png

镜像

a = 1
b = 0
c = 0
d = -1
e = 0
f = 0

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

镜像.png

测试页面 matrix_2d.html

    

        偏移
        旋转
        缩放
        剪切
        镜像
        重置
    
    
Block