CSS3-转换之skew

skew定义2D倾斜变换，所以是在平面上进行的扭曲变换。

1、skewX(angle)

定义沿着x轴的2D倾斜旋转，即在水平方向扭曲变形，效果如下：

skewX(30deg)是在水平方向扭曲变形，但是在上图中我们可以看到实际是沿Y轴逆时针旋转30度，但是有一个很明显的特征，沿X轴扭曲时，和X轴方向平行的中心线长度始终保持不变，和Y轴平行的中心线始终沿着上下两条边运动。

2、skewY(angle)

定义沿着Y轴的2D倾斜旋转

skewY(30deg)是在水平方向扭曲变形，但是在上图中我们可以看到实际是沿X轴顺时针旋转30度，但是有一个很明显的特征，沿Y轴扭曲时，和Y轴方向平行的中心线长度始终保持不变，和X轴平行的中心线始终沿着左右两条边运动。

3、skew(x-angle,y-angle)

定义沿着x和Y轴的2D倾斜旋转，与rotate不同的时，它不仅使元素旋转，而且会使元素变形

skew(30deg,30deg)是在水平方向和垂直方向同时扭曲变形，由图我们可以看到，X和Y分别旋转30度。

如有错误，请道友指正。非常感谢！