CSS实现鼠标滑动的3D透视效果

最近在开发官网的过程中，需要使用到如下图这种特效，面板跟随鼠标的移动会出现不同程度的偏移，就好像鼠标给他了一个作用力而导致其定轴旋转一样（下图是 viteconf 官网的样例）：

本文记录一下类似的实现方式。

堆砌元素

我们先把框架搭出来。

html 复制代码

<div class="card">
  <img src="xxx" />
</div>

样式：

css 复制代码

body {
  margin: 0;
  border-radius: 16px;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #a2a77b;
}
img {
  border-radius: inherit;
  height: 100%;
  width: 100%
}
.card {
  display: block;
  border-radius: inherit;
  height: 370px;
  overflow: hidden;
}

简简单单写一个 grid 布局，让 card 元素置于页面最中间，中间放置一张图片，图片素材我们已经准备好了，预览如下：

原理分析

旋转方向

我们想要鼠标划过的点陷下去，其本质就是控制card做一个立体的旋转，我们看下图：

浏览器在展示图片时，横轴是x，纵轴是y，而z轴是垂直于屏幕向外的，常用的 css 函数 rotateX、rotateY 等，他们传入正数角度，则按照上图各个轴线箭头方向看过去的逆时针方向转动，反之就是顺时针转动。

那么，让图片旋转就等价于调整x（类似于单杠体操）、y（类似于钢管舞）两个方向的角度。

z 轴这里可不能动，想象图片绕着垂直于屏幕的轴转动，那不成了幸运大转盘了么~~

那么具体到图片上，到底是逆时针还是顺时针呢？我总结了鼠标在四个角极端位置的旋转方式：

不信的话自己可以比划比划~~

旋转角度计算

定了怎么旋转了，那么，旋转多少度呢？我们可以自己确定一个微调的范围，比如设置范围正负5deg: const RANGE = [-5, 5], 图片的长度和高度我们能够拿到，鼠标当前所处的位置我们也能拿到，以x轴方向为例，我们有如下计算：

css 复制代码

鼠标当前位置距离图片最左侧距离 / 图片宽度 * (RANGE[1] - RANGE[0]) + RANGE[0]

上面的公式就能返回当前鼠标位置距离百分比占自定义尺度的位置。其中 鼠标当前位置距离图片最左侧距离 / 图片宽度 的值域是 0 - 1, (RANGE[1] - RANGE[0]) 是 10，所以前半部分的值域为：0 - 10，可以看到岂止位置的最大值超过了我们自己定义的范围，所以要加上Range的最小值：RANGE[0].

现在还剩一个问题，就是怎么获取鼠标当前位置距离图片最左侧距离呢？还记得我们上一篇文章 # 上班摸鱼时写了个 b 站 banner 的鼠标跟随动画效果吗？其中讲到，js 的 mouse 事件中，offsetX 表示相对于事件作用元素最左侧的偏移量，我们可以利用这个属性：

js 复制代码

card.addEventListener('mousemove', (e) => {
  const { offsetX, offsetY } = e;
  console.log(计算函数(offsetX, offsetWidth));
})

上面的伪代码就能打印当前鼠标位置应该旋转的x角度，y轴同理。

这里需要注意，计算 x 轴旋转角度需要使用 offsetX （反之亦然），设想一下，鼠标在最左侧边框的终点位置，此时是不是图片应该向左侧偏移最大位置？那么是旋转 Y 轴，此时 offsetX 刚好是 0，位于极值位置，而 OffsetY 却是中间值：

代码实现

接下来我们来简易实现一下上面说的一大堆。

先定一下 css 的旋转变量：

css 复制代码

.card {
  transition: transform 0.1s;
  transform: perspective(400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

其中 perspective 表示透视效果配置，数值越小表示程度越深，可以看这个学习：perspective示例

写一个鼠标事件来设置 css 变量：

js 复制代码

const RANGE = [-5, 5];
const getRotate = (value, maxValue) => {
  return value / maxValue * (RANGE[1] - RANGE[0]) + RANGE[0];
}

const offsetWidth = card.offsetWidth;
const offsetHeight = card.offsetHeight;

card.addEventListener('mousemove', (e) => {
  const { offsetX, offsetY } = e;
  const rx = -getRotate(offsetY, offsetHeight);
  const ry = getRotate(offsetX, offsetWidth);

  card.style.setProperty('--rx', `${rx}deg`);
  card.style.setProperty('--ry', `${ry}deg`);
})

可以看到，这里将上面的计算函数实现为 getRotate 了，计算出 x/y上的旋转角度后写入css变量。这里需注意，rx 计算出来的值与实际需要的值符号相反（逆时针是正），需要取反。

最后看看效果吧：