我做了一个div，它的手柄可以用来调整它的大小。当div的旋转Angular 为0度时，这些手柄可以很好地工作。但是当旋转Angular 改变时，我试图从一边调整div的大小，其他边的位置也会改变。当我试图从一个手柄调整它的大小时，我希望保持其余边的位置固定。下面是我的代码：请帮助我应该在其中做什么类型的更改。

const resizableDiv = document.querySelector('#resizable-div');
        const handles = document.querySelectorAll('.handle');

        let isResizing = false;
        let currentHandle = null;
        let originalWidth = 0;
        let originalHeight = 0;
        let originalX = 0;
        let originalY = 0;
        let currentX = 0;
        let currentY = 0;

        handles.forEach(handle => {
            handle.addEventListener('mousedown', e => {
                isResizing = true;
                currentHandle = handle;
                originalWidth = resizableDiv.offsetWidth;
                originalHeight = resizableDiv.offsetHeight;
                originalX = resizableDiv.offsetLeft;
                originalY = resizableDiv.offsetTop;
                currentX = e.pageX;
                currentY = e.pageY;
            });
        });

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

        document.addEventListener('mousemove', e => {
            if (!isResizing) return;
            let deltaX = e.pageX - currentX;
            let deltaY = e.pageY - currentY;
            if (currentHandle.classList.contains('handle-n')) {
                resizableDiv.style.height = originalHeight - deltaY + 'px';
                resizableDiv.style.top = originalY + deltaY + 'px';
            } else if (currentHandle.classList.contains('handle-e')) {
                resizableDiv.style.width = originalWidth + deltaX + 'px';
            } else if (currentHandle.classList.contains('handle-s')) {
                resizableDiv.style.height = originalHeight + deltaY + 'px';
            } else if (currentHandle.classList.contains('handle-w')) {
                resizableDiv.style.width = originalWidth - deltaX + 'px';
                resizableDiv.style.left = originalX + deltaX + 'px';
            }
        });

        // rotation

        const rotateHandle = document.querySelector('.rotate-handle');
        let isDragging = false;
        let currentDeg = 0;
        let startX = 0;
        let startY = 0;

        rotateHandle.addEventListener('mousedown', function(e) {
            isDragging = true;
            startX = e.clientX;
            startY = e.clientY;
        });

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

        document.addEventListener('mousemove', function(e) {
            if (!isDragging) return;
            const deltaX = e.clientX - startX;
            const deltaY = e.clientY - startY;
            currentDeg = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
            resizableDiv.style.transform = `rotate(${currentDeg}deg)`;
        });

#resizable-div {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50px;
            top: 50px;
            background-color: #ddd;
        }
        
        .handle {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border: 1px solid #000;
        }
        
        .handle-n {
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            cursor: n-resize;
        }
        
        .handle-e {
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            cursor: e-resize;
        }
        
        .handle-s {
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            cursor: s-resize;
        }
        
        .handle-w {
            left: -5px;
            top: 50%;
            transform: translateY(-50%);
            cursor: w-resize;
        }
        
        .rotate-handle {
            bottom: 0px;
            right: 0px;
            border-radius: 50%;
            background-color: white;
            cursor: pointer;
        }

<div id="resizable-div">
        <div class="handle handle-n"></div>
        <div class="handle handle-e"></div>
        <div class="handle handle-s"></div>
        <div class="handle handle-w"></div>
        <div class="handle rotate-handle"></div>
    </div>