對於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度後的坐標系。所以紅框二就按旋轉後(選中的錨點在中心點，正數為順時針)的坐標系進行平移（沿圖2中x和y軸的方向移動，x軸移動會向右下，y軸移動會向左下）。因為我設置的值比較特殊，所以只有在豎直方向有位移。通過計算紅框二豎直向下平移了100√2px，也就是紅框對角線的長度。

css3 transform屬性多值的順序問題