css3中translate、rotate、skew

translate(x,y):一个四边形，沿着X轴和Y轴移动。

rotate(angle):一个四边形，以中心点进行旋转。

rotateX(angle):一个四边形，围着与X轴平行的两条边中间的一条无形的边3D旋转。rotateY和rotateZ同理。

CSS3的斜切坐标系和数学中的坐标系完全不一样（设置斜切原点为左上角）

 

 

skew(0,30reg):一个四边形，按照水平方向Y轴顺时针旋转。

 

skew(30reg,0):一个四边形，是按照垂直方向X轴，逆时针旋转。

 

skew(30reg,30reg):一个四边形，按照X轴和Y轴同时顺时针旋转。

下面是错误的解释但比较好理解，但看上去比较像（下面说的X轴跟数学上的一致）：

skewX(angle):一个四边形。跟X轴平行的两条边，沿着X轴（与X轴保持平行）往两边拉伸。

skewY(angle):一个四边形。跟Y轴平行的两条边，沿着Y轴（与Y轴保持平行）往两边拉伸。