【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;
 line-height: 100px;
 text-align: center;
 color: #fff;
 background: orange;
 -webkit-transform: skew(45deg);
 -moz-transform:skew(45deg) 
 transform:skew(45deg);
}

演示結果：文字也是傾斜的，如果要使文字不傾斜，參考前面的rotate屬性。