【CSS3】变形--扭曲skew（）
这个⽤法和rotate⾮常相似。
扭曲skew()函数能够让元素倾斜显⽰。它可以将⼀个对象以其中⼼位置围绕着X轴和Y轴按照⼀定的⾓度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，⽽不会改变元素的形状。skew()函数不会旋转，⽽只会改变元素的形状。
Skew()具有三种情况：
1、skew(x,y)使元素在⽔平和垂直⽅向同时扭曲（X轴和Y轴同时按⼀定的⾓度值进⾏扭曲变形）；
第⼀个参数对应X轴，第⼆个参数对应Y轴。如果第⼆个参数未提供，则值为0，也就是Y轴⽅向上⽆斜切。
2、skewX(x)仅使元素在⽔平⽅向扭曲变形（X轴扭曲变形）；
3、skewY(y)仅使元素在垂直⽅向扭曲变形（Y轴扭曲变形）
⽰例演⽰：
通过skew（）函数将长⽅形变成平⾏四边形。
HTML代码：
<div class="wrapper">
<div>我变成平形四边形</div>
</div>
CSS代码：
.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
rotate属性line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}
演⽰结果：⽂字也是倾斜的，如果要使⽂字不倾斜，参考前⾯的rotate属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。