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

最后看看效果吧:

相关推荐
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda5 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机6 小时前
Promise 常见面试题(持续更新中)
前端·javascript
WebDesign_Mu9 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了9 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎9 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端10 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
勤奋菲菲11 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀11 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序