CSS轉換中的怪異行為：旋轉

Question

我試圖使該項目draggable and rotatable.

但是如果我設置transform:rotate(0deg); 我可以在父容器中拖到任何地方。 但如果我將其設置為90deg. 有一些區域變得undraggable並且也擴展到父容器之外。

<div id="container">
<div id="myitem"><p>my rotate/drag</p></div>

CSS：

#container{   
width:500px;
height:500px;
background:red;
}

#myitem{
width:115px;
height 50px;
background:black;
transform-origin:top left;
transform: rotate("90deg);
 -ms-transform-origin:top left;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-webkit-transform-origin:top left;
}

在此處查找示例，單擊此處以獲取問題樣本

解決了這個問題！

如果在設置css scale時捕獲$(foo).offset().left ，則使用transform-origin: top left;時，該值不等於實際位置transform-origin: top left;

要解決此問題，請用$(foo).offset().left by parseInt($(foo).css('left').replace('px',))替換$(foo).offset().left by parseInt($(foo).css('left').replace('px',))但需要position after run: foo{ top: 0; left: 0; position: absolute; }設置position after run: foo{ top: 0; left: 0; position: absolute; } position after run: foo{ top: 0; left: 0; position: absolute; }

:)

問題是誰在應用scale().時檢測transform-origin和位置差異scale(). 以%計算？

Answer 1

我只是在繞着你的問題跑來跑去，基本上，你想要一個可拖動且可旋轉的容器...

我對您的提琴進行了一些更改，並嘗試實現這一點， http：//jsfiddle.net/28WG3/19/

對html也有一些更改：-

<div id="container">
    <div id="main"><div id="myitem"><p>my rotate/drag</p></div>
</div>
</div>

希望這對您有用...