解决网页上元素旋转之后，边角超出父节点范围的问题

问题

在HTML中，利用css来作一个元素的旋转是很方便的。好比下面这样一张图片（边框是父节点的）：

只要作transform:rotate(45deg)的设置就能够旋转45度了，若是想指定旋转中心点，那么就再设置一下transform-origin:50% 50%。旋转之后的效果以下：

但有时候，咱们并不但愿它超出父节点边框，同时还能基本保持在左上角，那么应该如何调整元素的位置呢？

分析

看起来好像挺简单，假设旋转中心点是(0,0)点，它的左上角坐标(x1,y1) ，宽为w1，长为h1:

顺时针旋转c度以后，左上角坐标的位置能够经过三角函数计算获得：

x2 = x1*cos(c) - y1*sin(c)
y2 = x1*sin(c) + y1*cos(c)

同理，能够推导中左下角的新坐标，而后给矩形一个偏移量，把两个角从新移回来便可。

但实际上有点麻烦，由于一旦旋转超出了90度，就不必定是哪一个角超过边框了，简单的处理方式，就是不管如何，把4个角都算一遍，取最小的x和最小y，来决定偏移量。可是这样性能显然不太好。有没有一次性计算的方法呢？

仍是有的——那就是不计算独立点的坐标，而是用三角函数直接算该矩形旋转之后的外接矩形长和宽：

w2 = sin(a) * h1 + cos(a) * w1;
h2 = sin(a) * w2 + cos(a) * h1;

那么用新的长宽与原来长宽作比较，就能够得出应该偏移的量了：

x偏移 = (w2 - w1)/2
y偏移 = (h2 - h1)/2