一、基础原理
空间鼠标跟随效果是通过监听鼠标位置变化，计算元素在3D空间中的旋转或位移参数，利用CSS的`perspective`和`transform`属性模拟立体动态效果。核心逻辑是将鼠标坐标转化为元素的角度或位置偏移，让元素随鼠标移动呈现“空间跟随”的视觉体验。二、实现步骤
1. HTML结构搭建
首先需要一个容器和目标跟随元素。容器用于界定鼠标活动范围，目标元素则是实现跟随效果的主体。 ```html2. CSS样式配置
关键是通过perspective属性 定义3D空间的观察距离值越小，空间感越强，并为目标元素设置transform-style: preserve-3d 保持3D层级关系。 ```css .space-container { width: 800px; height: 500px; margin: 50px auto; border: 1px solid #eee; position: relative; perspective: 1000px; /* 定义3D空间观察距离 */ }.follower { width: 200px; height: 200px; background: linear-gradient(45deg, #4facfe, #00f2fe); border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(0) rotateY(0); /* 初始状态 */ transform-style: preserve-3d; /* 保持3D效果 */ display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; } ```
3. JavaScript逻辑实现
通过监听鼠标在容器内的移动事件，计算鼠标坐标与容器中心的偏移比例，将比例转化为旋转角度或位移距离，动态更新目标元素的`transform`属性。 核心步骤：- 获取容器和目标元素的DOM节点；
- 监听容器的`mousemove`事件，获取鼠标在容器内的相对坐标；
- 计算坐标偏移比例范围：-0.5 ~ 0.5；
- 将比例乘以旋转角度系数如15deg，得到最终旋转值；
- 应用`rotateX`和`rotateY`实现空间跟随效果。
```javascript
const container = document.querySelector('.space-container');
const follower = document.querySelector('.follower');
container.addEventListener('mousemove', (e) => { // 获取容器的尺寸和位置信息 const containerRect = container.getBoundingClientRect(); // 计算鼠标在容器内的X、Y坐标相对容器左上角 const mouseX = e.clientX - containerRect.left; const mouseY = e.clientY - containerRect.top; // 计算坐标偏移比例相对于容器中心 const xRatio = (mouseX / containerRect.width) - 0.5; const yRatio = (mouseY / containerRect.height) - 0.5; // 计算旋转角度系数可调整，值越大旋转幅度越大 const rotateY = xRatio * 15; // 水平方向旋转Y轴 const rotateX = -yRatio * 15; // 垂直方向旋转X轴，负号反转方向 // 应用旋转效果 follower.style.transform = `translate(-50%, -50%) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; }); ```
三、效果优化
为避免跟随效果生硬，可添加过渡动画 让元素平滑响应鼠标移动： ```css .follower { transition: transform 0.1s ease; /* 过渡时间0.1秒，缓动效果 */ } ``` 同时可调整`perspective`值如800px ~ 1200px或旋转角度系数如10deg ~ 20deg，平衡空间感与视觉舒适度。通过以上步骤，即可实现基础的空间鼠标跟随效果。核心在于理`perspective`构建3D空间，以及鼠标坐标到元素变换的参数转换逻辑。