我刚刚接触transform的skew属性值时一头雾水，根本不知道种东西到底是咋变的。上网查，各个网站上也只说这个使用来做扭曲变换的，具体是咋变的就是不说。。。。无奈我只好自己研究了，现把研究结果共享一下。
首先说变换的时候坐标系是咋建的，如下图（transform-origin:0px 0px;）。
既然skew(...)的括号里放的是坐标轴旋转的角度，那么接下来说一下旋转正方向的问题。y轴顺时针转为正，X轴逆时针转为正。
之后图形就可以确定了，因为两轴的位置确定了，然后用仿射变换即可确定。
方法/步骤
-
skew属性是个比较少用到的属性，至少我用的比较少。
用的好的话会让你的网页烨烨生辉，用不好的话，则是一大败笔。
现在就具体的介绍skew的用法：
语法：transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
-
先放示例，效果如图：
-
现在我们来看参数为一个的情况：
transform:skew(45deg);
它等同于transform:skewX(45deg);
可以看到demo标签向左倾斜45度，产生变形。
之所以会产生变形的，这是因为我给元素限定了高度为300px，所以只要倾斜的角度不为180°的倍数，他都会保持着300的高度，同时为了保持倾斜，只能拉长本身。（围绕X轴倾斜，保持高度；围绕Y轴倾斜，保留宽度。）
若倾斜解读为180的倍数，元素将不可见。
-
参数值为一个的第二种情况：
transform:skewX(45deg);【这个步骤就不说了，上面以提到】
transform:skewY(45deg);
效果如下图
-
再看看参数为2个的情况：
transform:skew(45deg，45deg);
此时元素将不可见，但实际上它应当在我画的箭头处。
其实根据步骤4和5可以发现，当Y轴倾斜45度后，元素有了一个45°的锐角，而此时又向X轴倾斜，于是这个锐角正好被压缩为0；于是形成了一个类似180°倍数的角。
-
通过修改X轴的倾斜度数为44度，可以发现元素还是会露出一部分的，跟我上面箭头画的位置存在疑点偏移。
-
8
说明：目前skew无Z轴的倾斜，说不定以后会又该属性。