一、直接上效果图：
然后是代码：
一共两种实现方式：
<!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>