牛角尖_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:39:08
原創
1292 人瀏覽過

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板