Heim  >  Artikel  >  Web-Frontend  >  牛角尖_html/css_WEB-ITnose

牛角尖_html/css_WEB-ITnose

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

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' 表示计算后的坐标,也就是显示时的坐标

画布是固定不变的,画布上的一点经过旋转(倾斜)后一定就不在原来的位置了

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn