在不考虑旋转的情况下拖动旋转元素的子元素，同时保持旋转
在不考虑旋转的情况下拖动旋转元素的子元素，同时保持旋转
提问于 2020-07-21 17:35:56
我一直在尝试解决这个问题，但没有成功。我当前正在尝试拖动具有旋转(transform: rotate(90deg))的父对象的子对象，但不使用旋转的父对象的旋转轴。
我想要做的是，如果我向上拖动子元素，它会将元素拖到右边，因为平面的"Y“是向右的，而不是向上，因为它被旋转了90度。
我做了一个快速的小提琴来展示下面附加的这个行为。它是用jQuery制作的，因为它更快，但我将使用适当的JS来解决这个问题。请注意，您可以正确地向上/向下/向左/向右拖动灰色元素，但如果您向上拖动红色元素，它将转向右侧而不是向上，依此类推。我希望它向上移动，同时保持旋转。
#parent {
width: 250px;
height: 250px;
background: grey;
top: 100px;
left: 100px;
transform: rotate(40deg);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-22 00:58:48
这是我的方法：
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的旋转。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63020006
复制
相似问题
从某些文件夹导入几个txt文件
通过调用从文件夹导入
从某些子文件夹中导入PowerShell模块
如何在通过maven创建zip文件时排除某些文件夹
通过Powershell从文件夹导入多个证书
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
