一文搞懂transform: skew

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

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

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

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

<iframe allowfullscreen="true" allowtransparency="true" frameborder="no" height="543" scrolling="no" src="//codepen.io/imgss/embed/PoYmZEp/?height=543&theme-id=27057&default-tab=result" style="width: 100%;" title="skew">

See the Pen skew by imgss
(@imgss) on CodePen.

</iframe>

标签：origin,滑块,变换,demo,skew,transform,搞懂
来源： https://www.cnblogs.com/imgss/p/11421248.html