这一节主要讲的是用鼠标旋转的元素，主要是利用原生js改变css的transform属性。这个属性下有很多方法。以下仅是关于本节内容的几种方法。其他的可以私下看看translate(x,y)translate2Dtranslate(x,y)同时水平和垂直移动（即X轴和Y轴同时移动）translateX(x)onlymovehorizo??ntally（X轴移动）translateY(Y)只有垂直移动（y轴移动）效果：链接说明rotate(angle)定义2D旋转，旋转角度定义在参数中。通过在rotation中指定angle参数，元素进行2D旋转，设置正数元素依次顺时针旋转参数中的angle。如果设置负数，它将逆时针旋转。参数中的angletransform-origin可以定义旋转的原点。如果不设置，则按照中心点旋转。该属性的参数也分为x轴y轴z轴（偏移量）作用：链接说明rotateX(angle)定义沿x轴的3D旋转。这个主要是沿着X轴旋转。顾名思义，它不会水平移动。肉眼看到的图形应该是上下翻转的。rotateY(angle)定义沿Y轴的3D旋转。这个主要是沿着Y轴旋转。顾名思义，它不会垂直移动。肉眼看到的图形应该是左右翻转的效果。偷一张图，作者看到了不会吃惊！rotateZ(angle)定义沿Z轴的3D旋转。我个人对Z轴的理解就是按照你设置的旋转原点，绕着圆旋转。下面是x、y、z轴的图解链接说明。另外，最重要的是变换矩阵matrix(n,n,n,n,n,n中的六个值，n)分别代表不同的属性，这里就不说了，如果没有的话话说，下去看看吧！！！使用上一篇文章中提到的坐标来计算鼠标移动时的角度。获取旋转元素的中心点。设置默认的旋转中心X原点和Y中心原点。根据元素的位置进行计算，使用元素的宽度+元素的偏移量通过计算旋转的原点来计算移位的原点。centerX=n.offsetLeft+n.offsetWidth/2centerY=n.offsetTop+n.offsetHeight/2这里会用到计算弧度Math.atan2得到旋转角度centerxstaticangle(centerx,centery,endx,endy){//鼠标移动时获取鼠标移动的e.client-点击鼠标时的clientvardiff_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)转换成角度varc=360*Math.atan2(diff_y,diff_x)/(2*Math.PI)//其实这里有逆时针和顺时针旋转,(360+-c)逆时针//如果是-90=360+-90,如果是-80=-80+90c=c<=-90?(360+c):c//补-90度的差returnc+90}例如：centerx:40,centery:30取中心点的值endx:80，安迪：60
