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?

Reply to discussion (solution)

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)