當div被旋轉時將CSS左移和上移

我試圖在使用style.transform=rotate(90deg)旋轉後，得到了一個矩形格的style.left和style.top。當div被旋轉時將CSS左移和上移

我瞭解div如何旋轉，並圍繞「轉換點」旋轉。而且我也明白，一個div可以旋轉45度，所以給出新的頂部/左邊會很尷尬（實際上給出了邊界框左/頂部）。

但回到原來的問題，旋轉矩形div 90度，有沒有辦法讓'新'左/頂？

我需要這個的原因是爲了一個項目我正在努力上傳圖片，允許用戶縮放，旋轉等，但目前不得不這樣做與PHP，以保持所有的尺寸正確的最終形象（其中顯然是不好的，因爲我不得不繼續加載一個新的圖像，一旦PHP完成旋轉/縮放等）

我也做了一點點jsfiddle顯示頂部/左側位置不會改變時是旋轉

2014-07-16 Just Lucky Really

也許這就是你要找的東西：http://stackoverflow.com/questions/11229040/how-to-get-the-position-of-element-transformed-with-css-rotate –

好吧，由於上面留下的評論，我設法把一個答案。

基本上使用：

newleft = parseInt(div.style.top) + Math.cos(90) * parseInt(div.style.height); 
newtop = parseInt(div.style.left) + Math.sin(90) * parseInt(div.style.height);

股利已經旋轉之後。

我已經更新了我的jsfiddle，因爲上面的註釋中使用了jQuery，但是這種方式只使用javascript。

來源

2014-07-16 17:05:56

當div被旋轉時將CSS左移和上移

回答

相關問題