CSS实现鼠标滑动的3D透视效果 最近在开发官网的过程中，需要使用到如下图这种特效，面板跟随鼠标的移动会出现不同程度的偏移，就好像鼠标给他了一个作用力而导致其定轴旋转一样（下图是 viteconf 官网的样例）： 本文记录一下类似的实现方式。 堆砌元素我们先把框架搭出来。 divclass="card" imgsrc="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 元素置于页面最中间，中间放置一张图片，图片素材我们已经准备好了，预览如下： 原理分析旋转方向我们想要鼠标划过的点陷下去，其本质就是控制card做一个立体的旋转，我们看下图： 浏览器在展示图片时，横轴是x，纵轴是y，而z轴是垂直于屏幕向外的，常用的 css 函数 rotateX、rotateY 等，他们传入正数角度，则按照上图「各个轴线箭头方向看过去的逆时针方向转动」，反之就是顺时针转动。 那么，让图片旋转就等价于调整x（类似于单杠体操）、y（类似于钢管舞）两个方向的角度。 ?z 轴这里可不能动，想象图片绕着垂直于屏幕的轴转动，那不成了幸运大转盘了么~~ ?那么具体到图片上，到底是逆时针还是顺时针呢？我总结了鼠标在四个角极端位置的旋转方式： 不信的话自己可以比划比划~~ 旋转角度计算定了怎么旋转了，那么，旋转多少度呢？我们可以自己确定一个微调的范围，比如设置范围 正负5deg: 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 却是中间值： 代码实现接下来我们来简易实现一下上面说的一大堆。 先定一下 css 的旋转变量： .card{ transition: transform0.1s; transform:perspective(400px)rotateX(var(--rx,0deg))rotateY(var(--ry,0deg)); } ?其中 perspective 表示透视效果配置，数值越小表示程度越深，可以看这个学习：perspective示例 ?写一个鼠标事件来设置 css 变量： constRANGE = [-5,5]; constgetRotate =(value, maxValue) ={ returnvalue / maxValue * (RANGE[1] - RANGE[0]) + RANGE[0]; } constoffsetWidth = card.offsetWidth; constoffsetHeight = card.offsetHeight; card.addEventListener('mousemove', (e) = { const{ offsetX, offsetY } = e; constrx = -getRotate(offsetY, offsetHeight); constry = 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/7340484096105627657 AI编程资讯AI Coding专区指南： https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文