[Back To Basic] CSS 2D Transforms

CSS transform

可以對元素做以下操作

• 移動
• 旋轉
• 縮放
• 傾斜

語法

• transform
• -ms-transform: IE9
• -webkit-transform: Safari 9

方法

• translate()

移動元素: 從目前位置移動指定的 x, y值

• rotate()

旋轉元素: 旋轉指定的角度

• scale()

縮放元素: 依據指定的參數倍數縮放

• scaleX()

縮放元素寬度: 依據指定的參數倍數縮放寬度

• scaleY()

縮放元素高度: 依據指定的參數倍數縮放高度

• skew()

傾斜元素: 依據指定的角度傾斜元素

• skewX()

傾斜元素X軸: 依據指定的角度傾斜X軸

• skewY()

傾斜元素Y軸: 依據指定的角度傾斜Y軸

• matrix()

結合以上所有功能，參數: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

source code