css牛角,钻了关于CSS3 transform matrix(),transform的矩阵运算的牛角尖了transform:matrix(a,b,c,d,e,f)a , d 是scale的参数 ...

钻了关于CSS3 transform matrix(),transform的矩阵运算的牛角尖了

transform:matrix(a,b,c,d,e,f)

a , d 是scale的参数　　 scale(sx,sy)可以由matrix(sx,0,0,sy,0,0)运算而来

e , f 是translate的参数　 translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)运算而来，

b , c 是skew的参数　　 skew(θx，θy)可以由matrix(1,tan(θy),tan(θx),1,0,0)运算而来

a, b, c, d 是rotate的参数 rotate(θ)可以有matrix(cosθ,sinθ,-sinθ,cosθ,0,0)运算而来

(一)

translate的x' 和y‘ 分别是新的坐标，scale的的x' 和y‘ 分别是新的width和height

那旋转的矩阵运算得出的x’ = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ

y’ = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

这里的x' 和y' 是什么?

倾斜的矩阵运算得出的x’ = x+y*tan(θx)+0 = x+y*tan(θx)

y’ = x*tan(θy)+y+0 = x*tan(θy)+y

这里的x' 和y' 是什么?

(二)

当transform要同时translate,scale,rotate,skew时，

translate的参数 就是matrix(a,b,c,d,e,f)中的" e , f "

rotate，scale，skew的参数就重叠了，这是如何叠加成matrix(a,b,c,d,e,f)中的” a,b,c,d “的？

同时旋转缩放位移的时候：

transform: rotate(θ) scale(sx,sy) translate(tx, ty)

transform:matrix(a,b,c,d,e,f) 的六个矩阵值是怎么组合出来的？

是不是transform: matrix(cosθ*sx,sinθ,-sinθ,cosθ*sy,tx,ty) ?

同时旋转缩放倾斜位移的时候：

transform: rotate(θ) scale(sx,sy) skew(θx,θy) translate(tx, ty)

transform:matrix(a,b,c,d,e,f) 的六个矩阵值是怎么组合出来的？

是不是transform: matrix(cosθ*sx,sinθ+tan(θy),-sinθ+tan(θx),cosθ*sy,tx,ty) ?

扫码下载作业帮

拍照答疑一拍即得