CSS3 skew斜切效果详解

前言

 之前一直没理解到这个变形的原理，加之项目上用的很少，就一直没花时间去梳理（这是个坏习惯！），今天趁着又看到了，赶紧来整理整理。

原理

其实原理很简单，只要手边有纸有笔（或者抽象思维比较好的也可以在脑子里画，反正学渣本渣是不行的）画出来就可以了。

举个栗子，下图是例图：

图1

图形仅在水平方向上变形（垂直方向上的高度不变）。 例如，skewX(30deg)就会把图片从图2变为图3的形状：

图2

图3

 

【解释】首先要理清楚的是，skewX是指图形在X轴方向上（也就是水平方向上进行变形），千万不要理解为它是x轴进行旋转！！其次，图形的边一定是和对应方向上的坐标轴平行的！也就是说，竖直方向上的边一定是和y轴平行。搞清楚了这个，再来弄清楚正负值的区别：

只需要记住，不管是skewX还是skewY亦或是skew，里面的参数取正时，往远离第一象限的方向旋转；取负值时，往靠近第一象限的方向旋转。

此时，相当于就有一只无形的手在水平方向上推图形（正值往左推，负值往右推），推动角度为参数30deg（如图3红色箭头所示）。

这样就可以在脑中推算出图形经过skew变形之后的大致形状了，比如：

• skew(+x deg)（同skewX(+x deg)），就是将图形往左推 x deg，就是一个尖角在左上和右下的平行四边形：
• skew(-x deg)（同skewX(-x deg)），就是将图形往右推 x deg，就是一个尖角在右上和左下的平行四边形：
• skew(0，+y deg)（同skewY(+y deg)），就是将图形往下推 y deg，就是一个尖角在左上和右下的平行四边形：
• skew(0，-y deg)（同skewY(-y deg)），就是将图形往上推 y deg，就是一个尖角在左上和右下的平行四边形：

复杂一点的话，就是两个一起设置非零的值，如：

• skew(+x deg，+y deg)，就是先将图形推成上述第一点的样子，之后再向下推，大致形状如：

其他情况同此理，不再赘述。

上述方法可以不动笔大概勾勒出经变形后的图形，但要精确画出来，请参照以下方法：

从旋转后产生的新坐标轴开始说起，新坐标轴与原图形的边（即图3黑色虚框）会产生四个交点（图3紫色小圆点），过四个交点画平行于“对立”坐标轴的直线，一共会画四条（图3紫色实线），画好之后，四条直线构成的封闭图形就是经变形后应得的图形。

【TIPS】“对立”坐标轴的意思是：如果是新坐标轴中的x轴与原图形边产生的交点，那么过这个交点画平行于新坐标轴y轴的直线。

 

形象一点但有些啰嗦（怪我文笔和逻辑思维不好）的解释：

有一个四根火柴棒搭成的矩形，每个顶点由橡皮筋松松地固定（可想而知有多容易变形），为了保持其形状，我们用两根玻璃棒搭成十字架，置于矩形最中心位置，作为矩形的框架，设定火柴棒必须和对应方向上的玻璃棒成平行状态。

此时，有一个小屁孩想捣乱，伸手四处戳火柴棒，看哪里能推得动。但我们有玻璃棒固定，只要玻璃棒不动，火柴棒自然也就推不动。而skewX(xxdeg)，相当于是控制玻璃棒。

所以上图3经skewX(30deg)之后，竖直方向的玻璃棒（也就是Y轴）向远离第一象限的方向转了30deg，但由于水平方向没有变形，所以水平方向上的玻璃棒原地不动。（对应图3中紫色虚线）

由于“火柴棒必须和对应方向上的玻璃棒成平行状态”的设定，火柴棒急需和玻璃棒保持统一（即平行），小屁孩自以为是在捣乱，结果正合我们的意思了。将火柴棒向对应玻璃棒所在的方向推动了，直至和玻璃棒平行就再也推不动了。