元素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旋轉也能夠按相同的套路去計算。

(完)