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 计算出来的值与实际需要的值符号相反(逆时针是正),需要取反。

最后看看效果吧:

相关推荐
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef069 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder11 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句11 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom11 小时前
JavaScript reduce()函数详解
javascript
小飞悟11 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子11 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手12 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅12 小时前
JavaScript 中你不知道的按位运算
前端·javascript