前端開發-關於CSS3 transform:matrix()牛角尖？

關於CSS3 transform:matrix()牛角尖？

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' 值表示什麼?

最佳回答：

牛角尖中鑽出來了呵呵