原创 小肚肚肚肚肚哦 2025-09-01 08:30 重庆
点击关注公众号，技术干货及时达！
最近在开发官网的过程中，需要使用到如下图这种特效，面板跟随鼠标的移动会出现不同程度的偏移，就好像鼠标给他了一个作用力而导致其定轴旋转一样（下图是 viteconf 官网的样例）：
本文记录一下类似的实现方式。堆砌元素我们先把框架搭出来。
原理分析旋转方向我们想要鼠标划过的点陷下去，其本质就是控制card做一个立体的旋转，我们看下图：
浏览器在展示图片时，横轴是x，纵轴是y，而z轴是垂直于屏幕向外的，常用的 css 函数 rotateX、rotateY 等，他们传入正数角度，则按照上图「各个轴线箭头方向看过去的逆时针方向转动」，反之就是顺时针转动。那么，让图片旋转就等价于调整x（类似于单杠体操）、y（类似于钢管舞）两个方向的角度。❝z 轴这里可不能动，想象图片绕着垂直于屏幕的轴转动，那不成了幸运大转盘了么~~❞那么具体到图片上，到底是逆时针还是顺时针呢？我总结了鼠标在四个角极端位置的旋转方式：
不信的话自己可以比划比划~~旋转角度计算定了怎么旋转了，那么，旋转多少度呢？我们可以自己确定一个微调的范围，比如设置范围 正负5deg: 
代码实现接下来我们来简易实现一下上面说的一大堆。先定一下 css 的旋转变量：
<div class="card"> <img src="xxx" /></div>样式：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 元素置于页面最中间，中间放置一张图片，图片素材我们已经准备好了，预览如下：const RANGE = [-5, 5], 图片的长度和高度我们能够拿到，鼠标当前所处的位置我们也能拿到，以x轴方向为例，我们有如下计算：鼠标当前位置距离图片最左侧距离 / 图片宽度 * (RANGE[1] - RANGE[0]) + RANGE[0]上面的公式就能返回当前鼠标位置距离百分比占自定义尺度的位置。其中 鼠标当前位置距离图片最左侧距离 / 图片宽度 的值域是 0 - 1, (RANGE[1] - RANGE[0]) 是 10，所以前半部分的值域为：0 - 10，可以看到岂止位置的最大值超过了我们自己定义的范围，所以要加上Range的最小值：RANGE[0].现在还剩一个问题，就是怎么获取鼠标当前位置距离图片最左侧距离呢？还记得我们上一篇文章 # 上班摸鱼时写了个 b 站 banner 的鼠标跟随动画效果 吗？其中讲到，js 的 mouse 事件中，offsetX 表示相对于事件作用元素最左侧的偏移量，我们可以利用这个属性：card.addEventListener('mousemove', (e) => { const { offsetX, offsetY } = e; console.log(计算函数(offsetX, offsetWidth));})上面的伪代码就能打印当前鼠标位置应该旋转的x角度，y轴同理。这里需要注意，计算 x 轴旋转角度需要使用 offsetX （反之亦然），设想一下，鼠标在最左侧边框的终点位置，此时是不是图片应该向左侧偏移最大位置？那么是旋转 Y 轴，此时 offsetX 刚好是 0，位于极值位置，而 OffsetY 却是中间值：.card { transition: transform 0.1s; transform: perspective(400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));}❝其中 perspective 表示透视效果配置，数值越小表示程度越深，可以看这个学习：perspective示例❞写一个鼠标事件来设置 css 变量：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 计算出来的值与实际需要的值符号相反（逆时针是正），需要取反。最后看看效果吧：https://code.juejin.cn/pen/7340484096105627657AI编程资讯AI Coding专区指南：
点击"阅读原文"了解详情~
