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' 值表示什么?
http://www.w3school.com.cn/cssref/pr_transform.asp
参考这个。
rotate 旋转
skew 倾斜
x y 表示原来的坐标
x' y' 表示计算后的坐标，也就是显示时的坐标
画布是固定不变的，画布上的一点经过旋转（倾斜）后一定就不在原来的位置了
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
164
收藏
