乐趣区

关于前端:让交互更加生动有意思的鼠标跟随-3D-旋转动效

jiezi

明天，群友问了这样一个问题，如下所示的鼠标追随交互成果，如何实现：

简略剖析一下，这个交互成果次要有两个外围：

  1. 借助了 CSS 3D 的能力
  2. 元素的旋转须要和鼠标的挪动相结合

本文，就将讲述如何应用纯 CSS 实现相似的交互成果，以及，借助 JavaScript 绑定鼠标事件，疾速还原上述成果。

纯 CSS 实现元素的 3D 旋转

如果不借助 JavaScript，仅仅只是 CSS，如何实现相似的 3D 旋转成果呢？

这里会使用到一种名为 正反旋转相消 或者是 正负旋转相消 的小技巧。嗯，名字起的很奇怪，如同数学概念一样。

在动画中，旋转是十分罕用的属性，

{transform: rotate(90deg);
}

如果咱们给不同的层级的元素，增加不同方向的旋转，会产生什么呢？

首先假如一下场景，咱们有这样的一层 HTML 构造：

<div class="reverseRotate">
    <div class="rotate">
        <div class="content"> 正负旋转相消 3D 动画 </div>
    </div>
</div>

款式如下：

.content 内是咱们的次要内容，好了，当初设想一下，如果父元素 .rotate 进行正向 linear 360° 旋转，最外层的父级元素 .reverseRotate 进行反向 linear 360° 旋转，成果会是啥样？

CSS 代码如下：

.rotate {animation: rotate 5s linear infinite;}
.reverseRotate {animation: reverseRotate 5s linear infinite;}
@keyframes rotate {
    100% {transform: rotate(360deg);
    }
}
@keyframes reverseRotate {
    100% {transform: rotate(-360deg);
    }
}

咱们能够失去这样一种动画（留神，下图是 GIF 不是 PNG）：

神奇！因为一正一反的旋转，且缓动函数一样，所以整个 .content 看上去仍然是静止的！留神，这里整个 .content 静止的十分重要。

有读者看到这里就要骂人了，作者你个智障，静止了不就没动画了吗？哪来的动画技巧？

别急！尽管看上去是静止的，然而其实先人两个元素都是在旋转的！这会看上去惊涛骇浪的成果底下其实是暗流涌动。用开发者工具选取最外层先人元素是这样的：

既然如此，咱们持续思考，如果我在其中旋转的一个父元素上，增加一些别的动画会是什么成果？想想就很刺激。

首先，咱们先给这几个元素增加 CSS 3D 转换：

div {
    transform-style: preserve-3d;
    perspective: 100px;
}

接着，尝试批改下面的旋转动画，在内层旋转上额定增加一个 rotateX：

@keyframes rotate {
    0% {transform: rotateX(0deg) rotateZ(0deg);
    }
    50% {transform: rotateX(40deg) rotateZ(180deg);
    }
    100% {transform: rotateX(0deg) rotateZ(360deg);
    }
}

成果如下：

Wow，这里须要好好了解一下。因为内容 .content 层是静止的但其实外层两个图层都在旋转，通过设置额定的 rotateX(40deg)，相当于叠加多了一个动画，因为正反旋转对消了，所有整个动画只能看到旋转的 rotateX(40deg) 这个动画，产生了上述的成果。

这样，在没有 JavaScript 染指的状况下，咱们就模仿了题图所示的 3D 成果。当然，仅仅是这样，与用户的联动是不够的，如果肯定要联合鼠标挪动，咱们就须要 JavaScript 的一些辅助了。

借助 Javascript 实现鼠标追随 3D 旋转动效

咱们的指标是实现这样一个动画成果：

这里，咱们其实有两个外围元素：

  1. 鼠标流动区域
  2. 旋转物体自身

鼠标在 鼠标流动区域 内的挪动，会影响 旋转物体自身 的 3D 旋转，而旋转的方向其实能够被合成为 X 轴方向与 Y 轴方向。

咱们来看一下，假如咱们的 HTML 构造如下：

<body>
    <div id="element"></div>
</body>

失去这样一个图形：

这里，body 的范畴就是整个鼠标可流动区域，也是咱们增加鼠标的 mousemove 事件的宿主 target，而 #element 就是须要追随鼠标一起转动的旋转物体自身。

因为整个成果是须要基于 CSS 3D 的，咱们首先加上简略的 CSS 3D 成果：

body {
    width: 100vw;
    height: 100vh;
    transform-style: preserve-3d;
    perspective: 500px;
}

div {
    width: 200px;
    height: 200px;
    background: #000;
    transform-style: preserve-3d;
}

成果如下：

没有什么不一样。这是因为还没有增加任何的 3D 变换，咱们给元素增加 X、Y 两个方向的 rotate() 试一下（留神，这里默认的旋转圆心即是元素核心）：

div {transform: rotateX(15deg) rotateY(30deg);
}

成果如下，是有那么点意思了：

好，接下来，咱们的指标就是通过联合 mouseover 事件，让元素动起来。

管制 X 方向的挪动

当然，为了更加容易了解，咱们把动画拆分为 X、Y 两个方向上的挪动。首先看 X 方向上的挪动：

这里，咱们须要以元素的核心为界：

  1. 当鼠标在核心右侧间断挪动，元素绕 Y 轴挪动，并且值从 0 开始，越来越大，范畴为(0, +∞)deg
  2. 反之，当鼠标在核心左侧间断挪动，元素绕 Y 轴挪动，并且值从 0 开始，越来越小，范畴为(-∞, 0)deg

这样，咱们能够失去这样一个公式：

rotateY = (鼠标 x 坐标 – 元素左上角 x 坐标 – 元素宽度的一半)deg

通过绑定 onmousemove 事件，咱们尝试一下：

const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");

mouseOverContainer.onmousemove = function(e) {let box = element.getBoundingClientRect();
  let calcY = e.clientX - box.x - (box.width / 2);
    
  element.style.transform  = "rotateY(" + calcY + "deg)";
}

成果如下：

好吧，旋转的太夸大了，因而，咱们须要加一个倍数进行管制：

const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");

mouseOverContainer.onmousemove = function(e) {let box = element.getBoundingClientRect();
  let calcY = (e.clientX - box.x - (box.width / 2)) / multiple;
    
  element.style.transform  = "rotateY(" + calcY + "deg)";
}

通过一个倍数束缚后，成果好了不少：

管制 Y 方向的挪动

同理，咱们利用上述的形式，同样能够管制 Y 方向上的挪动：

const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");

mouseOverContainer.onmousemove = function(e) {let box = element.getBoundingClientRect();
  let calcX = (e.clientY - box.y - (box.height / 2)) / multiple;
    
  element.style.transform  = "rotateX(" + calcX + "deg)";
};

成果如下：

当然，在这里，咱们会发现方向是元素静止的方向是反的，所以须要做一下取反解决，批改下 calcX 的值，乘以一个 -1 即可：

let calcX = (e.clientY - box.y - (box.height / 2)) / multiple * -1;

联合 X、Y 方向的挪动

OK，到这里，咱们只须要把上述的后果合并一下即可，同时，下面咱们应用的是 onmousemove 触发每一次动画挪动。古代 Web 动画中，咱们更偏向于应用 requestAnimationFrame 去优化咱们的动画，确保每一帧渲染一次动画即可。

残缺的革新后的代码如下：

const multiple = 20;
const mouseOverContainer = document.getElementsByTagName("body")[0];
const element = document.getElementById("element");

function transformElement(x, y) {let box = element.getBoundingClientRect();
  let calcX = -(y - box.y - (box.height / 2)) / multiple;
  let calcY = (x - box.x - (box.width / 2)) / multiple;
  
  element.style.transform  = "rotateX("+ calcX +"deg)"
                        + "rotateY("+ calcY +"deg)";
}

mouseOverContainer.addEventListener('mousemove', (e) => {window.requestAnimationFrame(function(){transformElement(e.clientX, e.clientY);
  });
});

至此，咱们就能简略的实现题图所示的鼠标追随 3D 旋转动效：

设置平滑出入

当初，还有最初一个问题，就是当咱们的鼠标来到流动区域时，元素的 transform 将停留在最初一帧，正确的体现应该是还原到原状。因而，咱们还须要增加一些事件监听做到元素的平滑复位。

通过一个 mouseleave 事件配合元素的 transition 即可。

div {
    // 与上述保持一致...
    transition: all .2s;
}
mouseOverContainer.addEventListener('mouseleave', (e) => {window.requestAnimationFrame(function(){element.style.transform = "rotateX(0) rotateY(0)";
  });
});

至此，咱们就能够完满的实现平滑出入，整体成果最终如下：

残缺的代码，你能够戳这里：CodePen Demo — CSS 3D Rotate With Mouse Move

最初

怎么，其实也不是很难吧？好了，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版