在CSS3中，我們可以使用skew()方法將元素傾斜顯示。
skew()方法跟translate()方法、scale()方法一樣，也有3種情況：
（1）skewX(x)：使元素在水平方向傾斜（X軸傾斜）；
（2）skewY(y)：使元素在垂直方向傾斜（Y軸傾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同時傾斜（X軸和Y軸同時傾斜）；
語法：
transform:skewX(x);
說明：
x表示元素在X軸傾斜的度數，單位為deg。
如果度數為正，表示元素沿水平方向（X軸）順時針傾斜；如果度數為負，表示元素沿水平方向（X軸）逆時針傾斜。
語法：
transform:skewY(y);
說明：
y表示元素在Y軸傾斜的度數，單位為deg。
如果度數為正，表示元素沿垂直方向（Y軸）順時針傾斜；如果度數為負，表示元素沿垂直方向（Y軸）逆時針傾斜。
注意，這裡是跟位移translate()方法類似的，也是W3C的奇葩規定。
語法：
transform:skew(x,y);
說明：
第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3傾斜skew()方法</title>
<style type="text/css">
/*設置原始元素樣式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*設置當前元素樣式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:skewX(30deg);
-webkit-transform:skewX(30deg); /*兼容-webkit-引擎浏覽器*/
-moz-transform:skewX(30deg);/*兼容-moz-引擎浏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
對於初學者，可能一時半會看不出skewX()方法的本質原理。其實skewX()方法變形原理是這樣的：由於我給元素限定了高度為100px，而skewX()方法是沿著X軸方向傾斜。所以，只要傾斜角度不是180°，元素都會保持100px的高度。同時為了保持傾斜，只能沿著X軸拉長本身。
由此我們可以總結：
transform:skewY(30deg); -webkit-transform:skewY(30deg); /*兼容-webkit-引擎浏覽器*/ -moz-transform:skewY(30deg); /*兼容-moz-引擎浏覽器*/
當采用上述代碼時，在浏覽器預覽效果如下：
學過點基本數學的人都知道，位移、旋轉和傾斜都不會改變四邊形的面積。skew()方法可能比較少用。不過用的好的話，會讓你的網頁美觀動感，但是用得不好的話，則將是一大敗筆。