鼠标悬停时CSS盒子整体3D旋转异常修复及纯CSS实现需求

要实现盒子整体3D旋转且保持形状不变，核心是给父容器添加perspective属性构建3D空间，再通过rotateX/rotateY控制盒子旋转方向，确保整体形变一致。以下分两种方案实现：

纯CSS分区近似效果 #

纯CSS无法获取鼠标精确坐标，可将盒子划分为四个区域，通过hover触发对应3D旋转：

<div class="container">
  <div class="box">
    <div class="hover-area top-left"></div>
    <div class="hover-area top-right"></div>
    <div class="hover-area bottom-left"></div>
    <div class="hover-area bottom-right"></div>
    <div class="content">悬停测试</div>
  </div>
</div>

/* 父容器设置透视，创建3D空间 */
.container {
  perspective: 1000px;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.box {
  width: 100%;
  height: 100%;
  background: #2c3e50;
  position: relative;
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

/* 覆盖盒子的四个悬停区域 */
.hover-area {
  position: absolute;
  width: 50%;
  height: 50%;
  z-index: 1;
}

.top-left { top: 0; left: 0; }
.top-right { top: 0; right: 0; }
.bottom-left { bottom: 0; left: 0; }
.bottom-right { bottom: 0; right: 0; }

/* 各区域触发的3D旋转效果 */
.top-left:hover ~ .box {
  transform: rotateX(15deg) rotateY(-15deg);
}
.top-right:hover ~ .box {
  transform: rotateX(15deg) rotateY(15deg);
}
.bottom-left:hover ~ .box {
  transform: rotateX(-15deg) rotateY(-15deg);
}
.bottom-right:hover ~ .box {
  transform: rotateX(-15deg) rotateY(15deg);
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
}

JS配合CSS实现精准跟随效果 #

若需要鼠标位置与旋转角度精准对应，用JS计算相对坐标并通过CSS变量传递给transform：

<div class="container">
  <div class="box" id="box">
    <div class="content">精准悬停旋转</div>
  </div>
</div>

.container {
  perspective: 1000px;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.box {
  width: 100%;
  height: 100%;
  background: #2c3e50;
  position: relative;
  transition: transform 0.1s ease;
  transform-style: preserve-3d;
  /* 通过CSS变量接收旋转角度 */
  transform: rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0));
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
}

const box = document.getElementById('box');

box.addEventListener('mousemove', (e) => {
  const rect = box.getBoundingClientRect();
  // 计算鼠标在盒子内的相对坐标（0-1范围）
  const xRatio = (e.clientX - rect.left) / rect.width;
  const yRatio = (e.clientY - rect.top) / rect.height;
  
  // 转换为±15deg的旋转角度，调整正负值让对应角落向用户靠近
  const rotateX = (yRatio - 0.5) * -30;
  const rotateY = (xRatio - 0.5) * 30;
  
  // 设置CSS变量
  box.style.setProperty('--rotate-x', `${rotateX}deg`);
  box.style.setProperty('--rotate-y', `${rotateY}deg`);
});

// 鼠标离开时重置旋转
box.addEventListener('mouseleave', () => {
  box.style.setProperty('--rotate-x', '0');
  box.style.setProperty('--rotate-y', '0');
});

关键注意点 #

• perspective必须添加到盒子的父容器，定义观察者到3D元素的距离，值越小3D效果越强。
• transform-style: preserve-3d确保盒子及子元素处于同一3D空间。
• 调整rotateX/rotateY的正负值，可控制鼠标所在角落向用户（-Z方向）靠近的效果。

内容的提问来源于stack exchange，提问作者Mathew