关于CSS3 transform:matrix()牛角尖?

transform:scale(sx,sy) >>> transform:matrix(sx,0,0,sy,0,0)

transform:translate(tx,ty) >>> transform:matrix(1,0,0,1,tx,ty)

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

transform:rotate(θ) >>> transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

既然transform都可以使用matrix(a,b,c,d,e,f)运算
而运算后:
x’=ax+cy+e
y’=bx+dy+f

那么:
translate:
x'= x+tx, x' 表示新坐标,
y'= y+ty, y' 表示新坐标.
scale:
x' = x*sx, x' 表示新宽度,
y' = y*sy, y' 表示新高度.

可是:
rotate:
x’ = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y’ = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ
这里的 x' 和 y' 值表示什么?
skew:
x’ = x+y*tan(θx)+0 = x+y*tan(θx)
y’ = x*tan(θy)+y+0 = x*tan(θy)+y
这里的 x' 和 y' 值表示什么?

2个回答

牛角尖中钻出来了呵呵

xllily1314
xllily1314 x' y' 原来代表图形transform之后4对新坐标
接近 5 年之前 回复

x' 和 y' 表示转换以后对应像素的坐标。rotate是旋转skew是倾斜

xllily1314
xllily1314 还有就是同时旋转倾斜位移缩放的时候,transform: rotate(θ) scale(sx,sy) skew(θx,θy) translate(tx,ty) 转换成矩阵运算transform:matrix(a,b,c,d,e,f)的时候,这六个矩阵值是怎么组合出来的?
接近 5 年之前 回复
xllily1314
xllily1314 translate的时候x'和y'是新坐标,scale的时候x'和y'是新的宽度和高度,就是rotate和skew时x'和y'的值都是是三角函数的形式,搞不懂这些三角函数的值代表什么?
接近 5 年之前 回复
xllily1314
xllily1314 translate的时候x'和y'是新坐标,scale的时候x'和y'是新的宽度和高度,就是rotate和skew时x'和y'的值都是是三角函数的形式,搞不懂这些三角函数的值代表什么?
接近 5 年之前 回复
xllily1314
xllily1314 万分感谢你的回答可是。。。
接近 5 年之前 回复
xllily1314
xllily1314 万分感谢你的回答可是。。。
接近 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐