Javascript 当我拖动一个用css旋转的图像时，它会以非旋转的方式拖动（原始）？

我制作了一个CSS网格来显示图像，图像旋转60度以形成对角线视图。问题是，我希望用户能够在网格中拖放图像以移动图像，但当他们拖动图像时，图像会被拖动，就好像它根本没有旋转一样。注意：我没有使用canvas元素，我使用的是纯元素

我试着用以下方法之一来研究解决这个问题的方法：jQuery、Javascript、React JS、CSS，但还没有找到任何干净/甚至有效的解决方案。我曾考虑过在旋转状态下重新捕获所有图像，但这将花费我处理的图像数量的永久时间

我通过css旋转图像

行为：url-ms-transform.htc； /*火狐*/ -莫兹变换：旋转315度； /*狩猎与铬*/ -webkit变换：旋转315度； /*歌剧院*/ -o变换：旋转315度； /*IE9*/ -ms变换：旋转115度； /*IE6，IE7*/ 过滤器：progid:DXImageTransform.Microsoft.MatrixsizingMethod='auto expand'，M11=0.7071067811865476，M12=-0.7071067811865475，M21=0.7071067811865475，M22=0.7071067811865476； /*IE8*/ -ms过滤器：progid:DXImageTransform.Microsoft.MatrixSizingMethod='auto expand'，M11=0.7071067811865476，M12=-0.7071067811865475，M21=0.7071067811865475，M22=0.7071067811865476；

---

我只想让用户拖动图像，并让它在拖动时保持旋转。非常感谢您的帮助。

您可以通过Java脚本处理-

覆盖浏览器的拖动事件。这将使您的旋转css保持不变

ball.ondragstart = function() {
                return false;
                };

完整的拖放代码，带有-

<img src="./samyak/images/0.jpeg" style="cursor: pointer; position: absolute; z-index: 1000; left: 777px; top: 39px; transition: auto 0s ease 0s;" width="40" height="40" id="ball">
<script>
            ball = document.getElementById("ball");
            ball.style.transform="rotate(30deg)"
            ball.ondragstart = function() {
            return false;
            };
            ball.onmousedown = function(event) { // (1) start the process

            // (2) prepare to moving: make absolute and on top by z-index
            ball.style.position = 'absolute';
            ball.style.zIndex = 1000;
            // move it out of any current parents directly into body
            // to make it positioned relative to the body
            document.body.append(ball);
            // ...and put that absolutely positioned ball under the cursor

            moveAt(event.pageX, event.pageY);

            // centers the ball at (pageX, pageY) coordinates
            function moveAt(pageX, pageY) {
            ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
            ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
            }

            function onMouseMove(event) {
            moveAt(event.pageX, event.pageY);
            }

            // (3) move the ball on mousemove
            document.addEventListener('mousemove', onMouseMove);

            // (4) drop the ball, remove unneeded handlers
            ball.onmouseup = function() {
            document.removeEventListener('mousemove', onMouseMove);
            ball.onmouseup = null;
            };

        }
</script>

---

可以把它们画出来，旋转到画布上，然后移动它们。也可以将每一个都包装在SVG中，并将其拖动。@Ourobrus这是一个好主意，如果所有其他方法都失败了，我可能最终会这样做。谢谢你的建议。你能添加你的拖放代码吗？@SamyakJain我没有拖放代码，因为我无法成功地想出任何远程工作的东西。我只是通过鼠标光标拖动图像。这并没有达到我想要的效果，但经过一点编辑，它对我的项目非常有效。我完全回答了这个问题，所以这个答案是正确的。