元素跟隨鼠標旋轉，未待完續。。。。

本節主要講的是元素跟隨鼠標旋轉主要是用到了原生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