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;
}

在这里查找示例 click here for sample of the problem

解决了这个问题！

如果在设置css缩放时捕获$(foo).offset().left，则使用transform-origin: top left;

时，该值不等于实际位置

修复此替换 $(foo).offset().left by parseInt($(foo).css('left').replace('px',)) 但需要设定 position after run: foo{ top: 0; left: 0; position: absolute; }

：）

问题是，在应用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>

希望这对你有用......

css转换中的奇怪行为：旋转

1 个答案: