CSS3 2D變形

CSS3有一些方便的東西，這個變形效果有機會也可以試試看。


首先用CSS畫出一個正方形出來。

如果想讓這個形狀旋轉，使用rotate()，()裡面填旋轉的角度。

view plaincopy to clipboardprint?

1. transform: rotate(30deg);   
2. -ms-transform: rotate(30deg); /* IE 9 */  
3. -webkit-transform: rotate(30deg); /* Safari and Chrome */  
4. -o-transform: rotate(30deg); /* Opera */  
5. -moz-transform: rotate(30deg); /* Firefox */  

位移的話使用translate()，可以分別填入(x位移, y位移)

view plaincopy to clipboardprint?

1. transform: translate(20px,40px);   
2. -ms-transform: translate(20px,40px); /* IE 9 */  
3. -webkit-transform: translate(20px,40px); /* Safari and Chrome */  
4. -o-transform: translate(20px,40px); /* Opera */  
5. -moz-transform: translate(20px,40px); /* Firefox */  

放大縮小使用scale()，裡面可以填入(x軸縮放, y軸縮放)

view plaincopy to clipboardprint?

1. transform: scale(1.2,1.4);   
2. -ms-transform: scale(1.2,1.4); /* IE 9 */  
3. -webkit-transform: scale(1.2,1.4); /* Safari and Chrome */  
4. -o-transform:scale(1.2,1.4); /* Opera */  
5. -moz-transform: scale(1.2,1.4); /* Firefox */  

要傾斜使用skew()，()填入(水平角度, 垂直角度)

view plaincopy to clipboardprint?

1. transform: skew(30deg,20deg);   
2. -ms-transform: skew(30deg,20deg); /* IE 9 */  
3. -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */  
4. -o-transform: skew(30deg,20deg); /* Opera */  
5. -moz-transform: skew(30deg,20deg); /* Firefox */  

另外還可以整合起來使用matrix()，可以參考這篇的研究。

參考資料
W3Schools