在保持旋转的同时拖动旋转元素的子元素而不考虑旋转

Question

我一直在尝试解决这个问题，但无济于事。我目前正在尝试通过旋转（变换：旋转（90deg））拖动父级的子级，但不采用旋转父级的旋转轴。

我想要做的是，如果我向上拖动子元素，它会将元素向右拖动，因为平面的“Y”是向右而不是向上，因为它旋转了 90 度。

我做了一个快速的小提琴来展示下面附加的这种行为。它是用 jQuery 制作的，因为它更快，但我将使用适当的 JS 来解决问题。请注意，尽管旋转了灰色元素，但您仍可以正确地向上/向下/向左/向右拖动，但是如果向上拖动红色元素，它会向右而不是向上等。我希望它向上/向下/向左/向右移动，同时保持旋转。

#parent {
width: 250px;
height: 250px;
background: grey;
top: 100px;
left: 100px;
transform: rotate(40deg);
}

https://jsfiddle.net/k71m9bfj/50/

Answer 1

这是我的方法：

https://jsfiddle.net/MartinGK/b97n248u/6/

我必须为孩子创建一个容器：

<div id="wrapper">
<h4>
Canvas
</h4>
    <div id="parent">
         <h4>Parent</h4>
  
        <div id="childContainer">
          <div id="child">
             <h4>Child</h4>
          </div>
        </div>
    </div>
</div>

并用这个设置样式：

#childContainer{
    transform: rotate(-90deg);
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
}

transform: rotate(-90deg); 恢复正常旋转。

 position: absolute;
 top: 0;
 left: 0;
 width: inherit;
 height: inherit;

其余的样式用于界定孩子可以使用的空间。

您可以将transform: rotate(90deg); 添加到孩子以保持父亲的相同轮换。如果你不使用它，孩子将使用#childContainer 的旋转。