问题在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;然后将新的长宽与原来的长宽进行比较，就可以得到应该偏移的量：xoffset=(w2-w1)/2yoffsetShift=(h2-h1)/2
