css3 transform屬性多值的順序問題

對於transform屬性的多值的順序問題，我本身就被困擾過。後來知道了跟順序有關，可是不知道爲何。我想應該不少人跟我之前同樣，知其然不知其因此然。若是不知道的，也許這篇文章會對你們有所幫助。

先來看一個例子。

html代碼:

<div id="red1"></div>
    <div id="red2"></div>

css代碼：

body {
        margin: 0;
    }
    div {
        width:100px;
        height:100px;
        background:red;
    }
    #red1 {
        transform: rotate(45deg);
    }
    #red2 {
        transform: rotate(45deg) translate(100px, 100px);
    }

紅框一transform屬性只有一個值rotate(45deg)，紅框二多了一個值translate(100px, 100px)，水平和豎直都平移100px，可是從圖中能夠看到紅框2只有豎直方向有位移。這是怎麼回事？

其實，當旋轉45度後，元素的整個座標系都旋轉了45度，以下圖：

圖1就是正常的座標系，圖2就是旋轉45度後的座標系。因此紅框二就按旋轉後的座標系進行平移。由於我設置的值比較特殊，因此只有在豎直方向有位移。經過計算紅框二豎直向下平移了100√2px，也就是紅框對角線的長度。

咱們再來看一個例子。

html代碼:

<div id="red"></div>
    <div id="green"></div>

css代碼：

body {
        margin: 0;
    }
    div {
        width:100px;
        height:100px;
        position: absolute;
        top: 50px;
        left: 100px;
    }
    #red {
        background:red;
        transform: rotate(45deg) translate(100px, 100px);
    }
    #green {
        background:green;
        transform: translate(100px, 100px) rotate(45deg);
    }

圖中能夠看到，值的順序對元素位置的影響。經過上面的介紹知道，紅框先旋轉再平移，即先旋轉座標系再平移，而綠框先按正常的座標系平移，再旋轉，因此它們的位置就不一樣了。

咱們能夠觸類旁通，好比3d旋轉等均可以按上面的方法去分析。

(完)