元素transform: rotate()之后，元素寬高該怎么計算？

通常，利用transform: rotate()元素之后，我們並不會去在意元素大小的變化，因為看上去並沒有什么變化。雖然看上去沒有變化，其實是有變化的。下面用一個例子來說明一下。

html：

	<div id="rect"></div>

css：

	div {
		width:100px;
		height:100px;
		margin: 100px auto;
		background:red;
		transform: rotate(45deg);
	}

效果如下：

圖中四邊形的寬高都是100px，然后旋轉了45度，當用瀏覽器查看它的寬高時就變成了141.421px。瀏覽器是怎么計算的呢？簡單畫了一個草圖。

旋轉之后，元素的大小其實就變成了紅色框的大小，很容易可以計算得到紅色框的寬高為141.421px。

注意：當你用js獲取元素的寬度時，返回的還是100px，因為css設置的寬度是100px，js獲取的是css的值。

旋轉之后的元素，不僅大小變化了，元素的位置也變了：

	$("#rect").offset()

上面代碼輸出：

	Object {top: 79.28932189941406, left: 404.289306640625}

css設置的margin-top是100px，但是上面的結果卻是79.289px，其實瀏覽器計算的是紅色框相對於文檔的位置。

transform: rotate(45deg)是2D旋轉，由此也可以聯想到3D旋轉也可以按相同的套路去計算。

(完)