文章/答案/技术大牛

发布

css拖动旋转

CSS拖动旋转基础概念

CSS拖动旋转是指通过用户交互（通常是鼠标拖动）来实现元素的旋转效果。这种效果可以通过CSS的transform属性和JavaScript来实现。

类型

基于鼠标事件的旋转：通过监听鼠标事件（如mousedown、mousemove、mouseup）来实现旋转。
基于触摸事件的旋转：通过监听触摸事件（如touchstart、touchmove、touchend）来实现旋转。

应用场景

图像编辑器：用户可以通过拖动来旋转图片。
地图应用：用户可以通过拖动来旋转地图视角。
游戏开发：实现角色或物体的旋转效果。

示例代码

以下是一个简单的基于鼠标事件的CSS拖动旋转示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Drag Rotate</title>
    <style>
        #rotateElement {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: center;
        }
    </style>
</head>
<body>
    <div id="rotateElement"></div>
    <script>
        const element = document.getElementById('rotateElement');
        let isDragging = false;
        let startX, startY, startAngle;

        element.addEventListener('mousedown', (e) => {
            isDragging = true;
            startX = e.clientX;
            startY = e.clientY;
            startAngle = getRotationAngle(element);
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            const angle = Math.atan2(dy, dx) * (180 / Math.PI);
            element.style.transform = `rotate(${startAngle + angle}deg)`;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        function getRotationAngle(element) {
            const style = window.getComputedStyle(element);
            const transform = style.transform;
            if (transform && transform !== 'none') {
                const values = transform.split('(')[1].split(')')[0].split(',');
                const a = values[0];
                const b = values[1];
                const angle = Math.atan2(b, a) * (180 / Math.PI);
                return angle;
            }
            return 0;
        }
    </script>
</body>
</html>

参考链接

常见问题及解决方法

旋转角度不准确：确保在计算旋转角度时正确处理坐标系和单位转换。
拖动过程中出现闪烁：优化事件监听和处理逻辑，减少不必要的重绘。
兼容性问题：确保在不同浏览器中测试，处理可能的兼容性问题。

通过以上方法，可以实现一个基本的CSS拖动旋转效果，并根据具体需求进行优化和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

如何根据拖动距离计算出旋转轮子的度数？

javascript、animation、css

我正在尝试创建一个动画轮子，用户可以使用CSS3变换和Javascript拖动来旋转。你如何计算出从给定的拖动距离将轮子旋转多少度？

浏览 3提问于2012-03-30得票数 0

回答已采纳

1回答

使用jQuery UI拖动旋转和绝对定位的div

jquery、jquery-ui、css、jquery-ui-draggable、css-transforms

当我试图使用css3 UI拖动绝对定位和旋转div (使用transform: rotate(45deg))时，jQuery似乎不知道旋转div的新起源在哪里。因此，当您开始拖动时，div会立即移出几个像素。注意，当可拖动的div处于相对位置时，它工作得很好。

浏览 3提问于2013-09-17得票数 2

回答已采纳

1回答

在三维css元素上使用Jquery ()进行三维旋转

jquery-ui、css、3d、rotation、draggable

我试图弄清楚如何使访问者能够使用.draggable()拖动来旋转3D div。目前，div旋转，但也移动垂直和水平，使过程敏感和不可预测。我想原点的div保持固定，而“拖动”只影响旋转，这样用户可以“旋转”的div周围看对方。下面是到codepen：的链接 var rotateCSS = 'rotate(' + ui.position.left+

浏览 0提问于2014-02-25得票数 0

1回答

旋转图像而不重置旋转

javascript、jquery、css、rotation、transform

点击和按住鼠标按钮，同时拖动光标，旋转其中心的图像。('-webkit-transform', 'rotate(' + degrees + 'deg)');1)如果我旋转图像，松开鼠标按钮，再旋转图像，旋转就会被重置。我希望能够旋转它一点点，然后点击和拖动

浏览 3提问于2014-07-30得票数 2

回答已采纳

1回答

jQuery - CSS -通过拖动鼠标事件旋转分区

jquery、css、jquery-ui、draggable、rotation

我在我的页面上有一个div (可以包含图像，文本区，其他)，它是可拖动和可调整大小的(感谢jQuery UI)，我想让它“可旋转”，在一个角上有一个手柄，使用css变换(-wekbit-变换，moz-变换)来拖动和旋转它。

浏览 0提问于2010-08-09得票数 13

回答已采纳

1回答

jQuery UI -可拖动元素在旋转时松开约束。

jquery、jquery-ui、css

我创建了一个jsFiddle 来说明我在代码中的问题(双击粉色元素并尝试拖动到蓝色框外，再次单击并比较结果)。当我在带有约束的可拖放元素上旋转CSS时，约束不像预期的那样工作。可拖动的元素可以部分地拖出容器之外。我的猜测是，它与CSS旋转的工作方式有关，但我不确定。有什么办法解决这个问题吗？

浏览 2提问于2012-04-04得票数 1

回答已采纳

1回答

当我拖动使用css旋转的图像时，它是否会以非旋转方式(原始)拖动？

javascript、jquery、reactjs、css

我制作了一个CSS网格来显示图像，图像被旋转了60度来进行对角查看。问题是，我希望用户能够在网格中拖放图像来移动图像，但当他们拖动图像时，它会像根本没有旋转一样拖动。我尝试过使用以下方法之一来解决这个问题: jQuery，Javascript，React JS，CSS，但是没有找到任何干净的或者甚至是有效的解决方案。我想过只需要重新捕获所有处于旋转状态的图像，但对于我正在处理的大量图像来说，这将永远花费时间。我通过css旋转图像

浏览 19提问于2019-05-22得票数 0

回答已采纳

1回答

是否有支持CSS旋转但不支持画布的浏览器？

html、canvas、html5-canvas

我使用Canvas和Rafaël库构建一些东西，其中我需要旋转元素(路径或图像)。您可以拖动右下角的圆，手臂将相应地延伸。它应该适用于不支持Canvas的旧浏览器，所以出现了CSS旋转。使用position: absolute img元素、jQuery和CSS旋转作为后备，重新构建画布有意义吗？

浏览 0提问于2013-02-14得票数 0

回答已采纳

1回答

用HTML、CSS和JS创建鼠标三维可旋转纸玩具

jquery、html、css

我想用HTML元素和CSS创建一个纸玩具。我要它可以通过鼠标拖动来旋转它。我怎样才能做到这一点？的东西)它可以用鼠标拖动旋转。

浏览 6提问于2014-11-15得票数 1

回答已采纳

1回答

图像被拖动时的旋转值

javascript、jquery、html、css、rotation

我有一个箭头的图像，用户可以通过单击并拖动它来旋转它。使用jQuery或Js，如何在拖动时获得旋转值(以度为单位)？我尝试过$('.el').css("-moz-transform")，但得到的只是一个我不能真正使用的值矩阵：matrix(0.721445, 0.190526, -0.190526, 0.721445

浏览 11提问于2017-06-30得票数 1

回答已采纳

1回答

情感与反应-美丽-dnd:条件风格不使用css道具

css、conditional-formatting、emotion、react-beautiful-dnd

我正在尝试有条件地转换拖放元素(使用react-beautiful-dnd)，在拖放元素被拖动时旋转它，我看到emotion-css使用样式化的组件语法进行了如下操作： display: flex; props.isDragging && transform: rotate(15deg);`; 但我无法让它使用情感的css property

浏览 2提问于2021-10-26得票数 0

1回答

旋转可拖动元素时出现可拖动包含错误

javascript、jquery、jquery-ui

我有一个可拖动的元素，它也是可调整大小和旋转的。这些旋转是由CSS转换处理的，然而，当元素旋转时，它会使可拖动功能失控。这里有一个(更新的)小提琴：谢谢。

浏览 15提问于2017-02-15得票数 2

回答已采纳

2回答

具有图像旋转的Jquery包含问题

jquery

我使用下面的代码来旋转拖放的div旋转效果很好，但是当我开始旋转时，图像移出了我缺少的“image.The”容器.Anything。

浏览 2提问于2011-02-10得票数 3

2回答

有角CDK阻力元件上失去的旋转位置

angular、angular-material、drag-and-drop、rotatetransform、angular-cdk-drag-drop

我试图用范围滑块旋转一个元素，但是每次我拖动该元素时，它都会在拖动时失去旋转的值，它还会改变框的位置，并将其放置在开始位置。/app.component.css"]export class AppComponent { dragPosition = { x: 0, y: 0text-muted">{{rotateValue}}º</span> </li>

浏览 9提问于2021-02-23得票数 2

回答已采纳

1回答

将可拖动的jQuery用户界面1.8.18更新为UI 1.11.4

jquery、jquery-ui、rotation、jquery-ui-droppable

可拖动的旋转在UI 1.8.18版本中工作得很好： drag: function(event, ui){ '-moz-transform': rotateCSS

浏览 4提问于2016-01-05得票数 1

回答已采纳

1回答

如何在反应中循环拖动滑块

reactjs、sass、slider、carousel、draggable

连续循环，我的意思是，它应该响应一个又一个显示图像的过程，当拖动？现在，我确实只有3个图像在我的滑块和当我拖动滑块向左，滑块与它的第三个图像和一个空白开始显示后。此外，我在现有代码中遇到的一个错误是，当我开始将滑块拖动到右侧时，突然浏览器上出现了一个滚动，并且一直处于永不结束的状态。通过永不结束的状态，我的意思是，它仍然在屏幕上，当我拖动我的所有3个图像完全向正确的方向。因此，这是我想申请和解决的两件事，在我目前的项目。我在下面分享我的代码。

浏览 0提问于2021-08-04得票数 0

1回答

如何与jQuery可拖动ASP.NET一起使用旋转css

jquery、asp.net、css、jquery-ui

现在我有两个选项来旋转div标签1.lanscape和2.portrait。我通过将css:-ms-transform:rotate(90deg)应用于div标签实现了div标签的旋转，但旋转后发生的是可拖动对象无法正常工作，它被拖到父级之外，甚至文本旋转也不起作用。基本上，我希望可拖动的文本随着div的旋转而旋转，并且可拖动的文本应该可以正常工作。

浏览 0提问于2012-01-16得票数 1

4回答

垂直纸滑块元件

html、polymer、paper-elements

我试着应用css来旋转它；这将旋转滑块，但不是“输入”；必须仍然单击并拖动鼠标水平，才能使“旋钮”上下移动。

浏览 5提问于2014-11-05得票数 2

3回答

拖动时旋转CSS 3D生成的立方体

css、jquery-ui

我有一个用CSS制作的3D生成的立方体，它在悬停时可以完美地旋转。/*.box-scene:hover .box {任何帮助都将得到重视。

浏览 1提问于2017-02-09得票数 1

1回答

为什么我的旋转对象拖到一个新的位置后会重置它的旋转位置？

javascript、reactjs、transform、css-transforms、moveable

我有一个可移动的反应组件，是可拖的和可旋转的。如果我旋转物体，它会像预期的那样旋转，但是当我拖动它(旋转它之后)，它会重置到它原来的旋转角度。beforeTranslate[1]}px)`;onRotate={({ target, transform }) => {}} 这就是它被拖到一个新位置后的样子(旋转被重置了)：

浏览 8提问于2022-09-11得票数 0

回答已采纳

点击加载更多