解決網頁上元素旋轉之後，邊角超出父節點範圍的問題

問題

在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