前端使用JavaScript结合CSS实现3D旋转跟随鼠标变化 |
||||||||||||||||||||||||||
|
+ 目录简单分析一下，这个交互效果主要有两个核心：
本人简单的说一下如何使用纯 CSS 实现类似的交互效果，以及，借助 JavaScript 绑定鼠标事件，快速还原上述效果。
纯CSS实现元素的3D旋转如果不借助 JavaScript，仅仅只是 CSS，如何实现类似的 3D 旋转效果呢？ 这里会运用到一种名为正反旋转相消或者是正负旋转相消的小技巧。嗯，名字起的很奇怪，好像数学概念一样。 在动画中，旋转是非常常用的属性，
?
如果我们给不同的层级的元素，添加不同方向的旋转，会发生什么呢？ 首先假设一下场景，我们有这样的一层 HTML 结构：
?
CSS 代码如下：
?
神奇！因为一正一反的旋转，且缓动函数一样，所以整个 有读者看到这里就要骂人了，作者你个智障，静止了不就没动画了吗？哪来的动画技巧？ 别急！虽然看上去是静止的，但是其实祖先两个元素都是在旋转的！这会看上去风平浪静的效果底下其实是暗流涌动。用开发者工具选取最外层祖先元素是这样的：
既然如此，我们继续思考，如果我在其中旋转的一个父元素上，添加一些别的动画会是什么效果？想想就很刺激。 首先，我们先给这几个元素添加 CSS 3D 转换：
?
接着，尝试修改上面的旋转动画，在内层旋转上额外添加一个 rotateX：
?
效果如下：
Wow，这里需要好好理解一下。由于内容 这样，在没有 JavaScript 介入的情况下，我们就模拟了题图所示的 3D 效果。当然，仅仅是这样，与用户的联动是不够的，如果一定要结合鼠标移动，我们就需要 JavaScript 的一些辅助了。 借助 Javascript 实现鼠标跟随 3D 旋转动效 我们的目标是实现这样一个动画效果：
这里，我们其实有两个核心元素：
鼠标在鼠标活动区域内的移动，会影响旋转物体本身的 3D 旋转，而旋转的方向其实可以被分解为 X 轴方向与 Y 轴方向。 我们来看一下，假设我们的 HTML 结构如下：
?
这里， 因为整个效果是需要基于 CSS 3D 的，我们首先加上简单的 CSS 3D 效果：
?
没有什么不一样。这是因为还没有添加任何的 3D 变换，我们给元素添加 X、Y 两个方向的
?
效果如下，是有那么点意思了：
好，接下来，我们的目标就是通过结合 mouseover 事件，让元素动起来。 控制 X 方向的移动 当然，为了更加容易理解，我们把动画拆分为 X、Y 两个方向上的移动。首先看 X 方向上的移动：
这里，我们需要以元素的中心为界：
这样，我们可以得到这样一个公式： rotateY = (鼠标 x 坐标 - 元素左上角 x 坐标 - 元素宽度的一半)deg 通过绑定 onmousemove 事件，我们尝试一下：
?
效果如下：
好吧，旋转的太夸张了，因此，我们需要加一个倍数进行控制：
?
通过一个倍数约束后，效果好了不少：
控制 Y 方向的移动同理，我们利用上述的方式，同样可以控制 Y 方向上的移动：
?
效果如下：
当然，在这里，我们会发现方向是元素运动的方向是反的，所以需要做一下取反处理，修改下
?
结合 XY 方向的移动 OK，到这里，我们只需要把上述的结果合并一下即可，同时，上面我们使用的是 完整的改造后的代码如下：
?
|
