container.addEventListener('mousemove', (e) => {
// 获取容器宽高
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
// 计算鼠标在容器内的相对坐标-0.5~0.5
const mouseX = (e.clientX / containerWidth) - 0.5;
const mouseY = (e.clientY / containerHeight) - 0.5;
// 应用位移X/Y轴偏移，Z轴可增加深度
element.style.transform = `
translate(-50%, -50%)
translateX(${mouseX * moveFactor}px)
translateY(${mouseY * moveFactor}px)
translateZ(${mouseX * mouseY * 20}px) /* Z轴深度效果 */
`;
});
```
核心逻辑：通过鼠标坐标与容器中心的相对差值计算位移，moveFactor控制移动幅度，Z轴参数增强立体层次。
四、进阶：多元素分层跟随
若需多个元素产生层次感，可给不同元素设置不同移动系数。例如：
```css
.follow-element.layer1 { move-factor: 10; }
.follow-element.layer2 { move-factor: 20; }
.follow-element.layer3 { move-factor: 30; }
```
分层原理：系数越大的元素跟随幅度越大，形成近大远小的空间透视效果。
通过以上步骤，即可实现基础的空间鼠标跟随效果。调整perspective值、moveFactor系数及Z轴参数，可优化空间感与交互流畅度。
怎样实现空间鼠标跟随效果？
空间鼠标跟随怎么弄？
空间鼠标跟随是通过代码控制页面元素随鼠标移动产生动态位移，营造出立体空间感的交互效果。实现这一效果需结合HTML结构、CSS样式与JavaScript逻辑，以下是具体步骤。
一、搭建基础HTML结构
首先需要创建承载元素的容器和跟随鼠标的目标元素。容器需作为空间参考系，目标元素则是视觉跟随主体。
```html
跟随元素
```
核心要点：容器与元素需设置明确层级，避免布局冲突。
二、配置CSS空间样式
通过CSS构建3D空间环境，让元素具备位移基础。需设置透视距离、3D转换样式及元素定位。
```css
.space-container {
position: relative;
width: 100vw;
height: 100vh;
perspective: 1000px; /* 透视距离，值越小空间感越强 */
transform-style: preserve-3d; /* 启用3D空间 */
}
.follow-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 初始居中 */
transition: transform 0.1s ease; /* 过渡效果，避免移动卡顿 */
}
```
关键属性：perspective定义空间深度，transform-style确保子元素继承3D空间。
三、编写JavaScript跟随逻辑
通过监听鼠标移动事件，计算鼠标坐标与容器中心的偏移量，动态调整元素位置。
```javascript
const container = document.querySelector('.space-container');
const element = document.querySelector('.follow-element');
const moveFactor = 15; // 移动系数，值越大位移越明显