絕對定位一個旋轉的div

我想定位一個div，這樣在（q）度旋轉（圍繞中點變換）之後，頂部和左側位置處於定義的位置。絕對定位一個旋轉的div

編輯：我沒有試着知道如何旋轉DIV - 我試圖找出位置DIV的位置，因此在旋轉後它位於指定的位置（頂部和左側）。例如，在下面的圖像中，觸摸左邊框，並從頂部定位像素，所以我需要知道如何將旋轉前的DIV定位到旋轉後的正確位置。

http://finantec.co.uk/example.png

所以在上面的例子中，什麼是正確的頂部和左側位置來定位「在這裏放置我請」分區，使旋轉後，它出現在圖示位置的公式。

我需要能夠做任何角度，任何最終的位置（頂部：y1，左：x1），我需要找到開始（頂部：y，左：x）位置之前旋轉是應用。

該解決方案可以是c＃或Javascript（首選c＃），或者甚至讓我知道一個我可以應用的公式。

我一直試圖這樣做三天了，而且我沒有前進，所以如果有強大的數學知識或經驗的人可以幫助，我會非常感激。

我相信這可以幫助很多人，如果它解決了！

謝謝。

來源

2013-08-30 JP Edwards

檢查下面的小提琴。當你點擊框時，旋轉發生的方式與你想要的完全一樣。

http://jsfiddle.net/264Qx/4/

.box 
{ 
width:200px; 
height:100px; 
background-color:yellow; 
margin-left: 100px; 
margin-top: 55px; 
font-family: Arial; 
} 

.boxrotation 
{ 
transform:rotate(-90deg); 
-ms-transform:rotate(-90deg); /* IE 9 */ 
-webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
}

來源

2013-08-30 07:47:08

感謝您的回答。我已經明白如何旋轉 - 這是我關心的定位。我編輯了我的問題，試圖讓這個更清楚。 –

@JPEdwards再次檢查jsfiddle。我把div完全觸及左邊的線。 –

丹諾 - 感謝您的幫助。我有的問題是我不知道角度會是什麼，或者最終的定位。我的代碼將允許用戶設置角度，以及旋轉後他們希望div完成的左/頂部多少像素。由此我需要知道在哪裏定位div，所以在旋轉之後它完成了用戶所要求的位置。 –

您可以使用CSS transform:rotate(30deg);

如果你想這樣做在Javascript/JQuery的，我建議使用優秀jQuery Rotate plugin做到這一點。它是由所有主要瀏覽器

* Internet Explorer 6.0 > 
* Firefox 2.0 > 
* Safari 3 > 
* Opera 9 > 
* Google Chrome

支持旋轉圖像，所有你需要做的是$("#image").rotate(45);（Demo）確定要旋轉的元素，並選擇度後，已經應用了旋轉屬性是那很簡單。

要動態旋轉，你可以使用setTimeout例如：

setTimeout(function() { $('#myImage').rotate(30) },5)

編輯：我做了重新創建你想要的圖像中達到什麼的例子demo。

#rt { 
    position: absolute; 
    top: 90px; 
    left: -0px; 
    width: 180px; 
    height: 20px;}

如果你div是200px的寬度，並且你將它旋轉90deg來定位它。你首先需要將它移動到0.5或者0.5倍的位置，因爲它會根據它嵌入的中心控制點來旋轉div。

將它向左或向右移動由div的高度決定。定位與以前完全相同，除了視覺寬度將是高度，高度將是寬度。由於它的旋轉。

如果寬度未知，那麼在css中通過百分比計算該問題並按照我之前提到的方式對齊文本並進行調整，而不是使用百分比的像素更容易。

我不知道如何正確回答這個問題，如果該框是動態自動更新各種寬度和高度。我只是一直在擺弄這件事，然後看看我是否可以用CSS解決問題，而且沒有運氣。我會嘗試使用Javascript，看看我能否碰到一個解決方案。

來源

2013-08-30 07:58:42

感謝您的回答。我已經明白如何旋轉 - 這是我關心的定位。我編輯了我的問題，試圖讓這個更清楚。 –

我更新了我的帖子，在這裏有一個示例演示 - http://jsfiddle.net/S67ZX/ –

嗨，邁克。我認爲我需要的是比這更多的技術。我有的問題是我不知道角度會是什麼，或者最終的定位。這個想法是允許用戶設置角度，以及旋轉後他們想要div完成的左邊/頂部多少個像素。由此我需要知道在哪裏定位div，所以在旋轉之後它完成了用戶所要求的位置。 –

絕對定位一個旋轉的div

回答

相關問題