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

问题

在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