Home  >  Article  >  Web Front-end  >  Niujiaojian_html/css_WEB-ITnose

Niujiaojian_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:39:081291browse

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)

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn