Home > Article > Web Front-end > Niujiaojian_html/css_WEB-ITnose
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)
Since transform can use matrix (a, b, c, d, e, f) operation
and after operation:
x'=ax cy e
y'=bx dy f
Then:
translate:
x'= x tx, x' represents the new coordinates,
y'= y ty, y' represents the new coordinates.
scale:
x' = x*sx, x' represents the new width,
y' = y*sy, y' represents the new height.
But:
rotate:
x' = x*cosθ- y*sinθ 0 = x*cosθ-y*sinθ
y' = x*sinθ y*cosθ 0 = x*sinθ y*cosθ
What do the x' and y' values here represent?
skew :
x' = x y*tan(θx) 0 = x y*tan(θx)
y' = x*tan(θy) y 0 = x*tan(θy) y
Here x' What do the and y' values represent?
http://www.w3school.com.cn/cssref/pr_transform. asp
refer to this.
rotate rotation
skew tilt
x y represents the original coordinates
x' y' represents the calculated coordinates, which is the coordinates when displayed
The canvas is fixed, and a point on the canvas will definitely no longer be in its original position after being rotated (tilted)