CSS3 2D變形
CSS3有一些方便的東西,這個變形效果有機會也可以試試看。
![392084_2876045350032_1057988528_n](http://farm9.staticflickr.com/8331/8118544309_275c66f4cb_m.jpg)
首先用CSS畫出一個正方形出來。
如果想讓這個形狀旋轉,使用rotate(),()裡面填旋轉的角度。
![407290_2876045550037_272564384_n](http://farm9.staticflickr.com/8328/8118543459_9a231d26b5_m.jpg)
位移的話使用translate(),可以分別填入(x位移, y位移)
![391141_2876045790043_2077098773_n](http://farm9.staticflickr.com/8047/8118557206_dae36be979_m.jpg)
放大縮小使用scale(),裡面可以填入(x軸縮放, y軸縮放)
![402709_2876045950047_2080150310_n](http://farm9.staticflickr.com/8043/8118556390_f720dfd67c_m.jpg)
要傾斜使用skew(),()填入(水平角度, 垂直角度)
![386073_2876046110051_983240228_n](http://farm9.staticflickr.com/8050/8118557652_a52cfe42c6_m.jpg)
另外還可以整合起來使用matrix(),可以參考這篇的研究。
參考資料
W3Schools
![392084_2876045350032_1057988528_n](http://farm9.staticflickr.com/8331/8118544309_275c66f4cb_m.jpg)
首先用CSS畫出一個正方形出來。
如果想讓這個形狀旋轉,使用rotate(),()裡面填旋轉的角度。
![407290_2876045550037_272564384_n](http://farm9.staticflickr.com/8328/8118543459_9a231d26b5_m.jpg)
- transform: rotate(30deg);
- -ms-transform: rotate(30deg); /* IE 9 */
- -webkit-transform: rotate(30deg); /* Safari and Chrome */
- -o-transform: rotate(30deg); /* Opera */
- -moz-transform: rotate(30deg); /* Firefox */
位移的話使用translate(),可以分別填入(x位移, y位移)
![391141_2876045790043_2077098773_n](http://farm9.staticflickr.com/8047/8118557206_dae36be979_m.jpg)
- transform: translate(20px,40px);
- -ms-transform: translate(20px,40px); /* IE 9 */
- -webkit-transform: translate(20px,40px); /* Safari and Chrome */
- -o-transform: translate(20px,40px); /* Opera */
- -moz-transform: translate(20px,40px); /* Firefox */
放大縮小使用scale(),裡面可以填入(x軸縮放, y軸縮放)
![402709_2876045950047_2080150310_n](http://farm9.staticflickr.com/8043/8118556390_f720dfd67c_m.jpg)
- transform: scale(1.2,1.4);
- -ms-transform: scale(1.2,1.4); /* IE 9 */
- -webkit-transform: scale(1.2,1.4); /* Safari and Chrome */
- -o-transform:scale(1.2,1.4); /* Opera */
- -moz-transform: scale(1.2,1.4); /* Firefox */
要傾斜使用skew(),()填入(水平角度, 垂直角度)
![386073_2876046110051_983240228_n](http://farm9.staticflickr.com/8050/8118557652_a52cfe42c6_m.jpg)
- transform: skew(30deg,20deg);
- -ms-transform: skew(30deg,20deg); /* IE 9 */
- -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
- -o-transform: skew(30deg,20deg); /* Opera */
- -moz-transform: skew(30deg,20deg); /* Firefox */
另外還可以整合起來使用matrix(),可以參考這篇的研究。
參考資料
W3Schools
留言