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

xiaochao 发布于2019-08-02 11:54 / 516人阅读

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

本节主要讲的是元素跟随鼠标旋转主要是用到了原生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)里面的六个值分别代表不同的属性，这里就不说它，没啥好说的自己下去看看吧！！！

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

获取旋转元素的中心点

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

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

获取旋转的角度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

云服务器 GPU云服务器未待完续 jquery鼠标跟随 DIV跟随鼠标移动 js中鼠标跟随

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53202.html

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

摘要：这主要是沿着轴进行旋转，顾名思义就是横向不动，肉眼看见的图形应该是上下翻转的效果定义沿着轴的旋转。本节主要讲的是元素跟随鼠标旋转主要是用到了原生js更改css的transform属性，这个属性下有很多方法，下面就只讲关于本节内容的几种方法，其他的可以私下自己去看一看 translate(x,y) 转换2D translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移...

Kerr1Gan 2019-08-23 12:42 评论0 收藏0
《每周一点canvas动画》——三角函数

摘要：常用三角函数前面我们简单的介绍了三角函数的表示方法以及的坐标系统。总结这节你应该学会了如何运用三角函数，控制物体的旋转。本节主要内容有：三角函数介绍常用三角函数解析鼠标跟随角度旋转看到三角函数，勾股定理这样的数学名词是不是有种双腿打颤的感觉啊！好吧，就算你已经吓尿了，也不能否认我们中学学习的知识终于有了用武之地，挽起袖子，开整！！！ 1、三角函数什么是三角函数呢？简单的...

Markxu 2019-08-19 18:06 评论0 收藏0
《每周一点canvas动画》——三角函数

摘要：常用三角函数前面我们简单的介绍了三角函数的表示方法以及的坐标系统。总结这节你应该学会了如何运用三角函数，控制物体的旋转。本节主要内容有：三角函数介绍常用三角函数解析鼠标跟随角度旋转看到三角函数，勾股定理这样的数学名词是不是有种双腿打颤的感觉啊！好吧，就算你已经吓尿了，也不能否认我们中学学习的知识终于有了用武之地，挽起袖子，开整！！！ 1、三角函数什么是三角函数呢？简单的...

aervon 2019-08-01 15:11 评论0 收藏0
javascript与三角函数之三：眼睛跟随效果

摘要：我们先看下最后的效果实现思路要实现眼睛随鼠标一起运动，我们必须先求出眼睛的坐标，也就是它的和值为了取到和值，我们只要知道角的内三角形的对边和邻边的长度即可为了取到对边和邻边，我们只需要知道角的弧度即可角的弧度，我们可能通过图中边和边，再使用我们先看下最后的效果 showImg(https://segmentfault.com/img/bVTp6V?w=1106&h=924); 实现思...

Meils 2019-08-20 18:52 评论0 收藏0