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

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

<div> width:200px; height:50px; -原始大小 </div>
<div class="transform"> scaleX(1.2)-寬度以中心點為準，向外縮放至原來大小的1.2倍 </div>
<div class="transform2"> scaleY(0.5)-高度以中心點為準，向外縮放至原來大小的一半  </div>
<div class="transform3"> scale(0.5,1.5)-寬度縮小為一半，高度放大至1.5倍 </div>

再寫上縮放效果的css樣式。

div{
	width:200px;
	height:50px;
	background-color:#FC9;
}
div.transform {
	-moz-transform: scaleX(1.2);		/*firfox*/
	-khtml-transform: scaleX(1.2);	/*chrome及Safari*/
	-webkit-transform: scaleX(1.2);  	/*chrome及Safari*/
	-o-transform: scaleX(1.2);  		/*opera*/
	transform:  scaleX(1.2);			/*ie9?*/
	
	margin-top:30px;
}
div.transform2 {
	-moz-transform: scaleY(0.5);	
	-khtml-transform: scaleY(0.5);	
	-webkit-transform: scaleY(0.5);	
	-o-transform: scaleY(0.5);	
	transform: scaleY(0.5);	

	margin-top:30px;
}
div.transform3 {
	-moz-transform: scale(0.5,1.5);
	-khtml-transform: scale(0.5,1.5);	
	-webkit-transform: scale(0.5,1.5);		
	-o-transform: scale(0.5,1.5);		
	transform: scale(0.5,1.5);

	margin-top:30px;
}

transform : scaleX(1.2);
表示寬度以中心點為準，向外放大至原來大小的1.2倍
transform : scaleX(0.5);
表示高度以中心點為準，向內縮小至原來大小的一半
transform : scale(0.5,1.5);
表示寬度縮小為一半，高度放大為1.5倍

實際狀態可以參考範例。css-縮放效果範例

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