元素跟随鼠标旋转，未待完续。。。。

本节主要讲的是元素跟随鼠标旋转主要是用到了原生js更改css的transform属性，这个属性下有很多方法，下面就只讲关于本节内容的几种方法，其他的可以私下自己去看一看

translate(x,y) 转换2D

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（y轴移动）
效果：

链接描述

rotate(angle) 定义2D旋转，旋转角度在参数中定义

通过指定rotate内设置角度参数对元素进行一个2D的旋转，设置正数元素则顺时针旋转参数内的角度，设置负数则逆时针旋转参数内的角度
transform-origin可以定义旋转的原点，不设置的话会按中心点进行旋转，这个属性的参数也分为 x轴 y轴 z轴（偏移量）
效果：

链接描述

rotateX(angle) 定义沿着 x 轴的 3D 旋转。

 这主要是沿着X轴进行旋转，顾名思义就是横向不动，肉眼看见的图形应该是上下翻转的效果

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

 这主要是沿着Y轴进行旋转，顾名思义就是垂直不动，肉眼看见的图形应该是左右翻转的效果，盗个图吧，作者看见别怪！

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

 Z轴我个人的理解就是按照你设置的旋转原点，绕圈旋转
 
 下面就是x，y，z 轴的图解

链接描述

另外还有最重要的就是transform的矩阵matrix(n,n,n,n,n,n)里面的六个值分别代表不同的属性，这里就不说它，没啥好说的自己下去看看吧！！！

利用上一篇文章所讲的坐标来计算鼠标移动的时候计算角度

1. 获取旋转元素的中心点

      设置默认旋转的中心X原点以及Y的中心原点，根据元素的位置计算，利用元素的width + 元素的偏移量 计算 旋转原点，鼠标点击
      时获取
      centerX = n.offsetLeft + n.offsetWidth / 2
      centerY = n.offsetTop + n.offsetHeight / 2

2. 这里会用到计算弧度Math.atan2

3. 获取旋转的角度centerx

      static angle (centerx, centery, endx, endy) {
          // 鼠标移动获取鼠标移动的e.client - 鼠标点击时的client
          var diff_x = endx - centerx, // 拿到计算弧度的差值
              diff_y = endy - centery
          // Math.atan2利用x，y坐标计算角度
          // 360 * Math.atan2(diff_y, diff_x) 映射到360度
          // 一个完整的圆的弧度是2π，所以：2π rad = 360°
          // / (2 * Math.PI) 转换成角度
          var c = 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI)
          // 其实在这里就分逆时针和顺时针旋转了，(360 + -c)逆时针
          // 如果为-90 = 360 + -90 ，如果为-80 = -80 + 90
          c = c <= -90 ? (360 + c) : c
          // 补上-90度的差值
          return c + 90
      }

   例如：

       centerx：40，centery：30 取的都是中心点的值
       endx: 80, endy: 60