CSS3之transform

以前面試時有問到旋轉，而後本身作的小項目也會用到這個。因而學習完來總結下。

transform經常使用的屬性有：

• 旋轉：rotate，支持3D
• 扭曲：skew，不支持3D
• 位移：translate，支持3D
• 縮放：scale，支持3D

語法：

transform:  <transform-function> [<transform-function>]* | none

[<transform-function>]* 表示多個屬性的疊加

　 若是屬性要疊加的話，請記住是用空格隔開，用空格！

例如：

transform: translateX(10px) rotate(10deg) translateY(5px);

　　可用於內聯(inline)元素和塊級(block)元素。

接下來就分別詳細介紹各個屬性的用法。

 

一.旋轉rotate

rotate(<angle>):爲rotate傳入一個角度值做爲參數進行2D旋轉，參數爲正時，元素將沿中軸線順時針偏轉這個角度值，參數爲負時，元素將沿中軸線逆時針偏轉這個角度值。基點默認爲元素中心點，能夠經過transform-origin對元素的基點進行設置。如transform:rotate(30deg)：

用rotateX(<angle>)則表示沿x軸方向上的旋轉，一樣，使用rotateY(<angle>)則表示沿y軸方向上的旋轉。有興趣的童鞋能夠嘗試一下。

注意：rotateZ等效於rotate。

 

若是須要在其餘向量上應用旋轉，可使用rotate3D(x,y,z,deg)，編輯x,y,z的值構建三維向量，最後一個參數是偏轉的角度。例如：

.trans_3d{
     transform:rotate3d(1,-1,0,60deg);
     -moz-transform:rotate3d(1,-1,0,60deg); /*IE9*/
     -ms-transform:rotate3d(1,-1,0,60deg); /*ff*/
     -o-transform:rotate3d(1,-1,0,60deg);   /*safari,chrome*/
     -webkit-transform:rotate3d(1,-1,0,60deg);  /*opera*/
}

二.skew扭曲變換

skew(<angle>[,<angle>])，X軸Y軸上的斜切變換，第二個參數可選。如省略則表示Y軸方向上無斜切。例如：

transform:skew(30deg,10deg);

　原圖在X軸方向上沿中軸線偏轉30°，在Y軸方向上偏轉10°。基點默認爲元素中心點，能夠經過transform-origin對元素的基點進行設置。如圖。

　可使用skewX(),skewY()表示單一方向上的skew變換。

   注意：skew沒有3D和skewZ選項。

三.scale比例縮放

scale(<number>[,<number>])，第二個參數可選,若是第二個參數未提供，則取與第一個參數同樣的值。若是傳入大於1則元素放大，小於1則元素縮小。基點默認爲元素中心點，能夠經過transform-origin對元素的基點進行設置。

例如：

transform:scale(1.1,1.1);

　　表示在原尺寸基礎上橫向縱向都放到到原來的1.1倍。

     注意：可使用scaleX(),scaleY(),scaleZ()作單一方向上的縮放，不過元素內的圖片文字也會被拉伸，形成圖片失真。

四.translate位移變換

translate(<x>[, <y>]) ，第一個過渡值參數，第二個過渡值參數選項。若是第二個參數未被提供，則以 0 做爲其值。按照設定的x,y參數值,當值爲負數時，反方向移動物體，其基點默認爲元素中心點，也能夠根據transform-origin進行改變基點。

例如:

transform:translate(100px,20px);

　　表示元素在x軸方向上右移100像素，在y軸方向上向下位移20像素，如圖：

    可使用translateX(),translateY(),translateZ()來表示單一方向上的位移。

 

五.改變元素基點transform-origin

transform-origin(X,Y):用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y的值能夠是百分值,em,px，其中X也能夠是字符參數值left,center,right；Y和X同樣除了百分值外還能夠設置字符值top,center,bottom，這個看上去有點像background-position設置同樣。如下列出寫法：

一、top left | left top 等價於 0 0 | 0% 0%

二、top | top center | center top 等價於 50% 0

三、right top | top right 等價於 100% 0

四、left | left center | center left 等價於 0 50% | 0% 50%

五、center | center center 等價於 50% 50%（默認值）

六、right | right center | center right 等價於 100% 50%

七、bottom left | left bottom 等價於 0 100% | 0% 100%

八、bottom | bottom center | center bottom 等價於 50% 100%

九、bottom right | right bottom 等價於 100% 100%

 其中 left,center right是水平方向取值，對應的百分值爲left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;若是隻取一個值，表示垂直方向值不變。

 

其餘的就很少作擴展了。transform-origin部分的內容參考了w3cAiren的博客。