一、直接上效果图：

然后是代码：

一共两种实现方式：

<!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>

js css3 固定点拖拽旋转的更多相关文章

  1. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  2. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  3. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  4. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  5. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  6. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  7. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  8. C# 图片盖章功能实现，支持拖拽-旋转-放缩-保存

    实现图片盖章功能,在图片上点击,增加“图章”小图片,可以拖拽“图章”到任意位置,也可以点击图章右下角园框,令图片跟着鼠标旋转和放缩. 操作方法:1.点击增加“图章”2.选中移动图标3.点中右下角放缩旋 ...

  9. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

随机推荐

  1. grep命令和tail命令

    写在前面的话: 最近参与了新项目开发,周期短,与自己负责的主要业务对接.业务复杂,时常出现bug,然额对于菜鸟的我,更是无从下手.其实最好的帮助就是 学会查看日志,关键是之前查看日志真是太少了,菜鸟一 ...

  2. android data binding jetpack III 绑定一个方法

    第三篇 给view绑定一下方法响应. (补充:1.被绑定的方法必须是public的.   1.绑定方法可以用主语法.也可以用以下双冒号方式“::” android:onClick="@{pr ...

  3. java高级之Io流

    1.1,什么是io流? 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输特性将流抽象为各种类,方便更直观的进行数据操作 ...

  4. GB 和 GiB 的区别

    GB 和 GiB 的区别 Gibibyte (GiB) is one of the standard units used in the field of data processing and da ...

  5. linux中为什么删除文件比创建文件要快，读取文件和删除文件的过程是什么？

    一.为什么删除文件比创建文件要快? 因为删除文件只是将bitmap位图表中将文件所占据的inode 和dacablock的使用状态从1变成0,相当于释放了这些快的使用权. 二.读取文件和删除文件的过程 ...

  6. HCL试验八

    pc1:配置静态ip地址,掩码,网关 路由器R1:配置ip地址192.168.1.254 24;配置dhcp int gi 0/0 ip add 192.168.1.254 24 qu dhcp en ...

  7. 【机器学习】Learning to Rank之Ranking SVM 简介

    Learning to Rank之Ranking SVM 简介 排序一直是信息检索的核心问题之一,Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning t ...

  8. java按某属性分组并计算相关属性的和。

    工作中在处理集合的时候会经常遇到需要分组然后计算某属性的和,在java8中,通过stream来操作集合,还是非常方便的,像过滤(filter).分组(group).获取单个属性的值,总而言之,简单方便 ...

  9. 第六次java实验报告

    Java实验报告 班级 计科二班 学号20188437 姓名 何磊 完成时间 2019/10/17 评分等级 实验四 类的继承 实验目的 理解异常的基本概念: 掌握异常处理方法及熟悉常见异常的捕获方法 ...

  10. c++ 读入优化通用模板

    struct ioss { #define endl '\n' ; char obuf[LEN], *oh = obuf; std::streambuf *fb; ioss() { ios::sync ...