css transform matrix使用

2D变换

1.平移 translate

transform:translate(x,y)
transform:matrix(1,0,0,1,x,y)

2.缩放 scale

transform:scale(x,y)
transform:matrix(x,0,0,y,0,0)

3.旋转 rotate

transform:rotate(x)
transform:matrix(cos(x),-sin(x),sin(x),cos(x),0,0)

4.拉伸 skew

transform:skew(x,y)
transform:matrix(1,tan(y),tan(x),1,0,0)

3D变换

1.平移 translate

transform:translate(x,y,z)
transform:matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)

2.缩放 scale

transform:scale(x,y,z)
transform:matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

3.旋转 rotate

transform:rotate(x,y,z,a)
transform:matrix(a,b,c,0,d,e,f,0,g,h,i,0,0,0,0,1)
| a d g 0 |
| b e h 0 |
| c f i 0 |
| 0 0 0 1 |

a=1-2.(y²+z²).sin²(a/2)
b=2.(x.y.sin²(a/2)+z.sin(a/2).cos(a/2))
c=2.(x.z.sin²(a/2)-y.sin(a/2).cos(a/2))

d=2.(x.y.sin²(a/2)-z.sin(a/2).cos(a/2))
e=1-2.(x²+z²).sin²(a/2)
f=2.(y.z.sin²(a/2)+x.sin(a/2).cos(a/2))

g=2.(x.z.sin²(a/2)+y.sin(a/2).cos(a/2))
h=2.(y.z.sin²(a/2)-x.sin(a/2).cos(a/2))
i=1-2.(x²+y²).sin²(a/2)