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>