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旋轉等都可以按上面的方法去分析。

(完)