一、直接上效果圖：
然后是代碼：
一共兩種實現方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .box { width: 200px; height:100px; background: #cccccc; position: absolute; top: 30%; left: 40%; transform-origin: 50% 50% 0; } </style> </head> <body> <div id="box" class="box"></div> <script> // 第一種 var isMove = false; $('#box').mousedown(function (event) { const element = event.target; const rect = element.getBoundingClientRect(); element.dataset.centerX = rect.left + rect.width / 2; element.dataset.centerY = rect.top + rect.height / 2; element.dataset.angle = getDragAngle(event); isMove = true; }); $('#box').mousemove(function (event) { if (isMove) { var angle = getDragAngle(event); event.target.style.transform = 'rotate(' + angle + 'rad)'; } }); $('#box').mouseup(function (event) { isMove = false; event.target.dataset.angle = getDragAngle(event); }); function getDragAngle(event) { var element = event.target; var startAngle = parseFloat(element.dataset.angle) || 0; var center = { x: parseFloat(element.dataset.centerX) || 0, y: parseFloat(element.dataset.centerY) || 0, }; var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX); return angle - startAngle; } // 第二種 // $(document).on('mousemove',function(e){ // var x = e.clientX; // var y = e.clientY; // var origin = {x:950,y:190} // 先手動指定當前中心點，也可以根據當前元素的left+width/2 的到x top+height/2 得到y值 // // 計算出當前鼠標相對於元素中心點的坐標 // x = x - origin.x; // 因為x大於origin.x 是在y軸右邊，直接減就行了 // y = origin.y - y;// 但是y如果要在x軸上方，它是比origin.y要小的，所以這里就需要反過來 // // 然后計算就可以了 // var ele = document.getElementById('box') // var deg = Math.atan2(y, x) / Math.PI * 180; // ele.style.transform = 'rotate('+ -deg +'deg)' // }); </script> </body> </html>
二、固定4個頂點
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> * { user-select: none; } .box { width: 200px; height:100px; background: #cccccc; position: relative; top: 30%; left: 40%; transform-origin: 50% 50% 0; margin-top: 15%; } .dot { position: absolute; width: 20px; height: 20px; background-color: #f60; } .dot1 { top: -10px; left: -10px; } .dot2 { top: -10px; right: -10px; } .dot3 { bottom: -10px; right: -10px; } .dot4 { bottom: -10px; left: -10px; } </style> </head> <body> <div id="box" class="box"> <div class="dot dot1"></div> <div class="dot dot2"></div> <div class="dot dot3"></div> <div class="dot dot4"></div> </div> <script> // 第一種 var isMove = false; $('.dot').mousedown(function (event) { const element = $('#box')[0] const rect = element.getBoundingClientRect(); element.dataset.centerX = rect.left + rect.width / 2; element.dataset.centerY = rect.top + rect.height / 2; element.dataset.angle = getDragAngle(event); isMove = true; }); $(document).mousemove(function (event) { if (isMove) { var angle = getDragAngle(event); $('#box')[0].style.transform = 'rotate(' + angle + 'rad)'; } }); $(document).mouseup(function (event) {
if (isMove) { isMove = false; $('#box')[0].dataset.angle = getDragAngle(event);
} }); function getDragAngle(event) { var element = $('#box')[0]; var startAngle = parseFloat(element.dataset.angle) || 0; var center = { x: parseFloat(element.dataset.centerX) || 0, y: parseFloat(element.dataset.centerY) || 0, }; var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX); return angle - startAngle; } </script> </body> </html>