CSS3 2D變形

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

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

如果想讓這個形狀旋轉,使用rotate(),()裡面填旋轉的角度。
407290_2876045550037_272564384_n
  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位移)
391141_2876045790043_2077098773_n
  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軸縮放)
402709_2876045950047_2080150310_n
  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(),()填入(水平角度, 垂直角度)
386073_2876046110051_983240228_n
  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

留言

熱門文章