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

首先用CSS畫出一個正方形出來。
如果想讓這個形狀旋轉,使用rotate(),()裡面填旋轉的角度。

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

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

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

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

首先用CSS畫出一個正方形出來。
如果想讓這個形狀旋轉,使用rotate(),()裡面填旋轉的角度。

- 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位移)

- 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軸縮放)

- 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(),()填入(水平角度, 垂直角度)

- 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
留言