傾斜效果 transform - skew
本篇要介紹使用css來製作出傾斜的效果。

首先先製作三個div有寬高的區塊。

<div class="transform"> skewX(10deg)-以x為平行軸，左右兩邊向左傾斜10度 </div>
<div class="transform2"> skewY(15deg)-以y為平行軸，上下兩邊向下傾斜15度 </div>
<div class="transform3"> skew(-10deg,-15deg)-以x為平行軸，向右傾斜10度，以y為平行軸，向上傾斜15度 </div>

再寫上傾斜效果的css樣式。

div.transform {
	-moz-transform: skewX(10deg);		/*firfox*/
	-khtml-transform: skewX(10deg);	/*chrome及Safari*/
	-webkit-transform: skewX(10deg);  	/*chrome及Safari*/
	-o-transform: skewX(10deg);  		/*opera*/
	transform:  skewX(10deg);			/*ie9?*/
	
	width:200px;
	height:50px;
}
div.transform2 {
	-moz-transform: skewY(15deg);	
	-khtml-transform: skewY(15deg);	
	-webkit-transform: skewY(15deg);	
	-o-transform: skewY(15deg);	
	transform: skewY(15deg);	

	margin-top:30px;
	width:200px;
	height:50px;
}
div.transform3 {
	-moz-transform: skew(-10deg,-15deg);	
	-khtml-transform: skew(-10deg,-15deg);	
	-webkit-transform: skew(-10deg,-15deg);		
	-o-transform: skew(-10deg,-15deg);		
	transform: skew(-10deg,-15deg);	

	margin-top:30px;
	width:200px;
	height:50px;
}

transform : skewX(10deg);
代表以x為平行軸，左右兩邊向左傾斜10度
transform : skewY(15deg);
代表以y為平行軸，上下兩邊向下傾斜15度
transform : skew(-10deg,-15deg);
代表以x為平行軸，向右傾斜10度，且以y軸為平行軸，向上傾斜15度

實際狀態可以參考範例。css-傾斜效果範例

以下為各瀏覽器的支援程度。
-moz-transform 各瀏覽器支援狀態:
   
-khtml-transform 及 -webkit-transform 各瀏覽器支援狀態:
   
-o-transform 各瀏覽器支援狀態:
   
transform 各瀏覽器支援狀態: