CSS3 2D轉換，我們可以斜拉(skew)，縮放(scale)，旋轉(rotate)以及位移(translate)元素。 **注意：**?Internet Explorer 10, Firefox, 和 Opera支持transform 屬性。Chrome 和 Safari 要求前綴 -webkit- 版本。 Internet Explorer 9 要求前綴 -ms- 版本. 常用 2D 變換方法： * translate() * rotate() * scale() * skew() * matrix() ## translate() translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動 ~~~ .translate { transform: translate(50px, 100px); -ms-transform: translate(50px, 100px); /* IE 9 */ -webkit-transform: translate(50px, 100px); /* Safari and Chrome */ } ~~~ ## rotate() rotate()方法，在一個給定度數沿著元素中心順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。 ~~~ .rotate { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } ~~~ ## scale() scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數： ~~~ .scale { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari and Chrome */ } ~~~ ## skew() skew()方法，該元素會根據橫向（X軸）和垂直（Y軸）線參數給定角度： ~~~ .skew { transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); /* IE 9 */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ } ~~~ skewX(30deg) 如下圖：  skewY(10deg) 如下圖：  skew(30deg, 10deg) 如下圖：  ## matrix() matrix()方法和2D變換方法合并成一個。 matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。 ~~~ .matrix { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ } ~~~ ## 源碼 本文中所用例子源碼參見?[https://github.com/waylau/css3-tutorial](https://github.com/waylau/css3-tutorial)?中?`samples`?目錄下的 2d_transform.html ## 參考 * [http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/](http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/)