一文搞懂transform: skew

目录

• 理解坐标系
• 复合变换

如何理解斜切 skew，先看一个 demo。在下面的 demo 中，有 4 个正方形，分别是

红色：不作 skew 变换， 绿色：x 方向变换， 蓝色：y 方向变换， 黑色：两个方向都变换，

拖动下面的滑块能够查看改变 skew 角度后的效果。切换 selector 能够设置 transform-origin，origin 默认是 0% 0%。你们能够把玩一下。

若是你把滑块拖到了 90deg 或者 - 90deg，那么你应该能够回答上面的问题了。若是你在 chrome 上看到整个页面变白，能够到隔壁 firefox 上试试，就这个 demo 而言，火狐是表现最好的, safari 最差。

<iframe height="543" style="width: 100%;" scrolling="no" title="skew" src="//codepen.io/imgss/embed/PoYmZEp/?height=543&theme-id=27057&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/imgss/pen/PoYmZEp/'>skew</a> by imgss (<a href='https://codepen.io/imgss'>@imgss</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

用左扭，右扭来理解 skew 可能更加符合咱们的直觉，可是倒是不许确的。拿绿色正方形来讲，origin 在 0% 0% 时，skew 20 度看起来像是往右扭，可是 origin 变成 100% 100% 时，看起来又像是往左扭了。

那么到底该怎么理解这个 skew 变换呢，其实它是矩阵 matrix 变换的一种。关于矩阵变换，张鑫旭老师的这篇文章讲解的不错，传送门，其中提到 skew 变化和通用 matrix 变换的对应关系：

也就是说 matrix 函数的第二三个参数来控制图形的斜切的，更通用一点，下面这个图展现了 css matrix 中的 6 个参数分别控制哪一种变换，咱们能够看一下：

写到 matrix 函数里面以下：

有同窗问了，为何没有旋转的参数啊，其实旋转是 scale 和 skew 的组合操做。可是为了保证旋转后和原来的形状保持一致，4 个参数应该存在以下关系：

换句话说，旋转是一组特定的 scale + skew 组合操做。 <a name="理解坐标系" id="理解坐标系"><h2>理解坐标系</h2></a>

在了解到 skew 实际上是一种矩阵变换后，咱们来了解一下浏览器里的坐标系。由于除了 transform，其余操做都受坐标原点的影响。在浏览器中，向下为 Y 轴正方向，向右为 x 轴正方向，惟独原点是不肯定的，而这正是 transform-origin 所起的做用。 当你设置这个属性为 top left 时，就是说矩阵变换坐标系的原点位于左上角，从而获得图形中的各个点的坐标，经过矩阵运算获得变换后的坐标，最后由浏览器渲染出来。设置为 50% 50% 则意味着坐标原点在图形的中心。 <a name="复合变换" id="复合变换"><h2>复合变换</h2></a>

思考下面两行 css:

对两个个正方形分别作上述变换，出来的效果是不一样的，缘由是由于上面两个操做，至关于对坐标进行两次矩阵乘法运算，不一样于普通的乘法运算，矩阵乘法运算是不存在 ** 交换率 ** 的，因此结果会不一样。

参考文章： https://www.cnblogs.com/TianFang/p/3920734.html https://code-industry.net/masterpdfeditor-help/transformation-matrix/ https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%e7%9f%a9%e9%98%b5/ http://www.javashuo.com/article/p-rucapaya-hp.html https://www.jianshu.com/p/956d54376338

原文出处：https://www.cnblogs.com/imgss/p/11421248.html