Matrix 矩阵css3

深入理解css3 2D变换,请参考这篇文章 理解CSS3 transform中的Matrix(矩阵)
深入理解css3 3D变换,请参考这篇文章 好吧,CSS3 3D transform变换,不过如此!

translate

matrix(1,0,0,1,30,30)  == translate(30, 30);

Matrix 矩阵css3

scale

matrix(sx, 0, 0, sy, 0, 0) == scale(sx, sy)

Matrix 矩阵css3

rotate

matrix(cosθ,sinθ,-sinθ,cosθ,0,0) == rotate(0 deg)

transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0); === rotate(30 deg)

Matrix 矩阵css3

skew

matrix(1,tan(θy),tan(θx),1,0,0) === skew(θx + "deg",θy+ "deg")

Matrix 矩阵css3

镜像效果

matrix(1.000000,0.000000,0.000000,-1.000000,0,0)

Matrix 矩阵css3

Matrix 矩阵css3

相关推荐