CSS3中Transform中的matrix()方法的问题

transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform: rotate(30deg);
说是上面两句是等效的,谁能帮忙解释下为什么,主要是第一句没太懂,矩阵在上线性代数的时候没有好好学。。。

阅读 5.7k
3 个回答
matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 等同于 rotate(θdeg)

2D的旋转,其实是旋转z轴

matrix(a,b,c,d,e,f) 的参数拆成矩阵就是这样的

a c e 
b d f
0 0 1

旋转z轴θ度
x轴最后会与原点偏移,X轴上的点[x,0,0]的坐标都会变成 [cosθx,sinθx,0]

          a c e 
[1,0,0] * b d f = [cosθ,sinθ,0]
          0 0 1

y轴

          a c e 
[0,1,0] * b d f = [-sinθ,cosθ,0]
          0 0 1

z轴 没有动

          a c e 
[0,0,1] * b d f = [0,0,1]
          0 0 1

这样就可以反推矩阵的个个值

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题