CSS3 2D轉換模組

標籤：cal   enter   bottom   sla   旋轉   多個   需要   距離   nbsp   

2D轉換模組

屬性：transform

方法：

rotate()      元素順時針旋轉給定的角度，負值時，元素將逆時針旋轉，單位deg。

有rotateX、rotateY、rotateZ，預設Z

translate() 元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數。

有translateX，translateY

scale()       元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數。參數>1時，放大；參數<1時，縮小。

有scaleX，scaleY

注意點：

1.如果需要進行多個轉換，那麼用空格隔開

2.2D轉換模組會修改元素的座標系，所以旋轉後在平移就不是水平平移了

例：transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

 

屬性：transform-origin （形變中心點）

transform-origin : x y; x水平方向 y垂直方向

參數：具體像素（15px），百分比（15%），特殊關鍵字（right center bottom）

 

屬性：perspective 

perspective:150px; 像素表示距離

透視：近大遠小 透視屬性必須添加到需要呈現近大遠小效果的元素的父元素上面

 

CSS3 2D轉換模組