前端CSS-3D交互，跟随鼠标3D旋转

何实现前端CSS-3D交互，跟随鼠标3D旋转。

这期视频分享一个三D卡片的交互效果。图片会在鼠标滑入后跟随鼠标进行三D旋转。

要让卡片进行3D旋转，需要使用腾腾、rotate以及透视视剧perspective卡片。3D旋转效果只需要rotatex和rotatey的旋转就可以了。

通常情况下透视数据p2x的取值为五百px左右，这里设置为五百px。然后修改旋转xy的词，发现静态效果可以呈现出来。如何跟随鼠标？就需要监听鼠标滑入、滑动、滑出事件。

首先需要给滑动设置一个确定旋转范围，然后在鼠标移动监听的时候进行计算。计算公式非常常见，就不再赘述。

最后把值复制给旋转的xy，通过css变量的方式进行复制。然后在鼠标滑出的时候再把旋转的xy复制为零，就实现了这个功能。

插入滑出的时候没有过渡效果，比较生硬。可以加上过渡效果，但是因为旋转的xy值修改的频率太高了，过渡效果会有延迟。而且d bug看日志的时候还会卡的不行。也可以仅在鼠标滑出的时候增加过渡效果，这样在鼠标离开的时候就有过渡效果了。

但是鼠标滑入的时候还是会比较生硬，因为会接着跟鼠标旋转，所以体验还好。如果有小伙伴知道在反复去掉过渡效果的情况下滑入，如何处理过渡效果，欢迎在评论区进行讨论。那么这期视频就到这里结束了，喜欢的小伙伴可以帮忙点点赞，感谢大家的观看，拜拜。

言

总算是写完了基础类型篇的内容。这次咱们来聊一聊动画。

闲话就不多扯了，直接开始正文。

正文

一、基础概念

JavaScript中，我们可以依赖内部提供的动画函数，去移动DOM元素（<img />，<div>或任何其他HTML元素）。

JavaScript提供了以下两个在动画中经常使用的函数。

setTimeout（function，duration） - 此函数从现在起持续几毫秒后调用函数。
setInterval（function，duration） - 该函数在每个持续时间毫秒后调用函数。
clearTimeout（setTimeout_variable） - 此函数调用清除setTimeout（）函数设置的任何计时器。

JavaScript还可以设置DOM对象的许多属性，包括它在屏幕上的位置。我们也可以设置对象的顶部和左侧属性，以将其放置在屏幕上的任何位置：

二、Manual Animation

接下来，让我们使用DOM对象属性和JavaScript函数实现一个简单的动画，上代码：

代码很简单，这里简单解释一下，当然能看懂的朋友，可以跳过啦：

我们使用JavaScript函数getElementById（）来获取DOM对象，然后将其分配给全局变量imgObj。
我们已经定义了一个初始化函数init（）来初始化imgObj，我们已经设置了它的位置和左边的属性。
我们在窗口加载时调用初始化函数。
最后，我们调用moveRight（）函数将左边距离增加10个像素。也可以将其设置为负值，将其移动到左侧。

PS：供复制的代码，但是请注意，图片资源需要调整一下

<html> 
 <head>
 <title>JavaScript Animation</title> 
 <script type = "text/javascript">
 var imgObj = null;
 function init() {
 imgObj = document.getElementById('myImage');
 imgObj.style.position= 'relative'; 
 imgObj.style.left = '0px'; 
 }
 function moveRight() {
 imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
 } 
 window.onload = init;
 </script>
 </head>
 <body> 
 <form>
 <img id = "myImage" src = "/images/html.gif" />
 <p>Click button below to move the image to right</p>
 <input type = "button" value = "Click Me" onclick = "moveRight();" />
 </form> 
 </body>
</html>

三、Automated Animation

在上面的demo中，我们看到了每次单击时图像如何向右移动（PS：运行起来的效果）。

接下来我们使用JavaScript的setTimeout()来自动执行此过程，看代码：

同样，简单的解释一番（大佬略过~）：

所述MoveRight的()函数是调用的setTimeout()函数来设置的位置imgObj。
我们添加了一个新函数stop()来清除setTimeout()函数设置的定时器，并将对象设置在其初始位置。

PS：供复制的代码，但是请注意，图片资源需要调整一下

<html> 
 <head>
 <title>JavaScript Animation</title> 
 <script type = "text/javascript">
 var imgObj = null;
 var animate ;
 function init() {
 imgObj = document.getElementById('myImage');
 imgObj.style.position= 'relative'; 
 imgObj.style.left = '0px'; 
 }
 function moveRight() {
 imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
 animate = setTimeout(moveRight,20); // call moveRight in 20msec
 }
 function stop() {
 clearTimeout(animate);
 imgObj.style.left = '0px'; 
 } 
 window.onload = init;
 </script>
 </head>
 <body> 
 <form>
 <img id = "myImage" src = "/images/html.gif" />
 <p>Click the buttons below to handle animation</p>
 <input type = "button" value = "Start" onclick = "moveRight();" />
 <input type = "button" value = "Stop" onclick = "stop();" />
 </form> 
 </body>
</html>

三、鼠标滑过

这是一个很常见的效果，就是鼠标滑入某个元素，然后做动画。上代码：

再解释一波（同样大佬略过）：

在加载此页面时，“if”语句检查图像对象是否存在。如果图像对象不可用，则不会执行此块。
Image()构造函数创建并预加载称为新的图像对象image1的。
为src属性分配名为/images/html.gif的外部图像文件的名称。
同样，我们在此对象中创建了image2对象并分配了/images/http.gif。
＃（哈希标记）禁用链接，以便浏览器在单击时不会尝试转到URL。此链接是图像。
所述的onMouseOver当用户的鼠标移动到链路，而触发事件处理程序的onMouseOut事件处理程序，当用户的鼠标从链路（图像）移开被触发。
当鼠标在图像上移动时，图像从第一个图像变为第二个图像。当鼠标远离图像时，将显示原始图像。
当鼠标远离链接时，初始图像html.gif将重新出现在屏幕上。

PS：供复制的代码，但是请注意，图片资源需要调整一下

<html>
 <head>
 <title>Rollover with a Mouse Events</title> 
 <script type = "text/javascript">
 if(document.images) {
 var image1 = new Image(); // Preload an image
 image1.src = "/images/html.gif";
 var image2 = new Image(); // Preload second image
 image2.src = "/images/http.gif";
 }
 </script>
 </head>
 <body>
 <p>Move your mouse over the image to see the result</p>
 <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
 onMouseOut = "document.myImage.src = image1.src;">
 <img name = "myImage" src = "/images/html.gif" />
 </a>
 </body>
</html>

尾声

关于动画篇的内容，到此就结束了。边翻译边总结还真有点强行杂糅到一起的感觉。可能还是自己功力不足吧。

希望以后的文章可以，更丝滑一些，哈哈~

文要介绍的是一种鼠标从一个元素移入移出时，获取鼠标移动方向的思路。这个方法可以帮助你判断鼠标在移入移出时，是从上下左右的哪个方向发生的。这个思路，是我自己琢磨出来，利用了一点曾经高中学过的数学知识，但是非常简单好理解，希望能对你有所帮助。

在线demo：

相关代码：

另外demo1.html里面还有部分逻辑代码。

效果演示：

思路详解

1. 把元素框分成如下四部分：

只要能判断出鼠标移入移出时属于哪个部分的范围内，问题即可解决。而这个判断可通过斜率，结合鼠标的位置与元素框中心点的位置比较得出。这个判断原理，采用下面的坐标系图解来说明。

2. 解决这个问题，建立如下图坐标系：

1）上图以浏览器可视区域左上角为原点建立坐标系，坐标系与数学坐标系方向一致，往右表示x轴正方向，往下表示y轴负方向；

2）图中点(x1,y1)代表元素框左上角，(x4,y4)代表元素框右下角，(x0,y0)代表元素框的中心点，（x,y）表示鼠标移入移出时与元素框的边的交点；

3）根据下面的公式：

可得(x1,y1)与（x4,y4)这条对角线的斜率为 k = (y1-y4)/(x1-x4)。由于对称性，元素框另外一条对角线的斜率一定是 -k。

同时由于(x1,y1)与（x4,y4)这条对角线在坐标系中一定经过的是第二和第四象限，所以k肯定是负值，而 -k一定是正值。

4）根据同样的公式，当鼠标移入移出时的瞬间，与元素边框的交点与元素框中心点的斜率 k1 = (y-y0)/(x-x0)。

5）由图可知，当 k < k1 < –k时，鼠标一定是从元素的左右方向移动的；反之，一定是从上下方向移动的。

当鼠标是从左右方向移动时，如果x > x0，那么鼠标就是从右边移动的，反之就是从左边移动的；

当鼠标是从上下方向移动时，如果y > y0时，那么鼠标就是从上边移动的，反之就是从下边移动的。

注意：坐标系中所有的y值都是负的。

以上便是这个问题，我提供的解决思路，通过上面的图解说明，相信大家理解起来会比较容易。如果查看我提供的代码实现demo1.js，会发现代码的逻辑，跟上面的图解说明也是一致的。当然这个思路只是解决如何判断鼠标移入移出的方向问题，demo中的效果实现最后还得要借助css 过渡才行，不过这个部分就更简单了，详细代码可见demo1.html的源码，逻辑非常简单，这里就不再详细说明了。

其它思路

在得出上面的思路之前，我其实已经在网上了解到另外一个思路实现了，我把该实现也做了一个demo：

代码：

当然这两个demo，从效果上没有任何区别，它们的区别仅仅在于鼠标移动方向判断的算法不同而已。这个算法可以在demo2.js中找到，你也可以通过下面的两篇文章了解到它的一些介绍：

不过惭愧的是，我并没有看懂这个思路的原理，所以我这里也给不出解释说明了，虽然在别的地方看到了一些解释，但是并不是很清晰，所以我才去想有没有更简单理解的方法实现。实际工作中，我认为这两种思路都是可以使用的，用哪个凭自己喜好决定就行了。

总结

最后希望本文提供的这个小东西在你平常工作的时候，能够派上用场，为你的页面添加一些活泼的滑入滑出效果等等，同时也算是自己的一个积累。

在线咨询

上一篇：关于 HTML5 你需要了解的基础知识
下一篇：HTML5和原生APP优缺点大对比，世界究竟是谁的？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端CSS-3D交互，跟随鼠标3D旋转

言

正文

尾声

思路详解

其它思路

总结

您的项目需求