钻了关于CSS3transformmatrix(),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

Question

钻了关于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) ?

Answer 1

infinite：限循环
：指定象画具体循环数
用CSS3写用面 式让画限循环