元素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旋转也能够按相同的套路去计算。

(完)