3D立方体时钟：秒数更新逻辑优化与分钟数字倒置修复

一、秒立方体（secondCube）仅在左侧不可见面更新秒数 #

核心思路 #

要实现仅在左侧面不可见时更新秒数，关键是精准判断左侧面的视觉不可见状态，而非单纯依赖旋转角度绝对值判断（此前失效大概率是角度逻辑不准确，比如未处理累积旋转、阈值范围卡得不对）。

实现步骤 #

1. 跟踪实时旋转角度
   假设立方体通过transform: rotateY(deg)实现旋转，用变量存储累积旋转角度，每次旋转同步更新：

let currentRotation = 0; // 存储立方体当前累积旋转角度
let currentSecond = new Date().getSeconds();
let hasUpdatedThisCycle = false; // 标记当前旋转周期是否已更新秒数

2. 精准判断左侧面不可见区间
   绕Y轴旋转时，左侧面初始朝向-X轴在90°~270°含整圈循环的区间内完全不可见，用取模运算处理循环角度：

const normalizedAngle = currentRotation % 360;
const isLeftFaceInvisible = normalizedAngle > 90 && normalizedAngle < 270;

3. 周期内仅更新一次秒数
   仅在左侧面不可见、当前周期未更新、且秒数实际变化时，更新所有面的秒数，旋转回到可见区间后重置标记：

function updateSecondCube() {
  const now = new Date();
  const normalizedAngle = currentRotation % 360;
  const isLeftFaceInvisible = normalizedAngle > 90 && normalizedAngle < 270;

  if (isLeftFaceInvisible && !hasUpdatedThisCycle && now.getSeconds() !== currentSecond) {
    currentSecond = now.getSeconds();
    // 更新所有秒面的数字
    document.querySelectorAll('.second-face').forEach(face => {
      face.textContent = currentSecond;
    });
    hasUpdatedThisCycle = true;
  }

  // 旋转回到可见区间时，重置更新标记
  if ((normalizedAngle >= 0 && normalizedAngle <= 90) || (normalizedAngle >= 270 && normalizedAngle <= 360)) {
    hasUpdatedThisCycle = false;
  }
}

// 示例旋转函数，根据实际旋转速度调整增量
function rotateSecondCube() {
  currentRotation += 1;
  document.getElementById('secondCube').style.transform = `rotateY(${currentRotation}deg)`;
  updateSecondCube();
  requestAnimationFrame(rotateSecondCube);
}

二、修复分钟立方体（minuteCube）数字偶尔倒置的bug #

常见原因及解决方法 #

数字倒置通常是面的transform变换逻辑错误，或父元素旋转与子面变换冲突导致：

1. 修正各面初始变换
   确保每个面的旋转、位移是相对立方体中心的正确定位，避免文字因旋转方向错误倒置：

.minute-face {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #fff;
  border: 1px solid #000;
}

.minute-front { transform: translateZ(50px); }
.minute-back { transform: rotateY(180deg) translateZ(50px); }
.minute-left { transform: rotateY(-90deg) translateZ(50px); } /* 用-90deg避免文字倒置 */
.minute-right { transform: rotateY(90deg) translateZ(50px); }
.minute-top { transform: rotateX(90deg) translateZ(50px); }
.minute-bottom { transform: rotateX(-90deg) translateZ(50px); }

2. 避免变换冲突
   不要在子面样式中重复添加父元素的旋转角度，保持每个面的变换仅基于立方体中心定位。

3. 强制文字方向
   若仍有偶发倒置，给文字元素添加强制方向规则：

.minute-face span {
  direction: ltr;
  transform: rotate(0deg);
  display: inline-block;
}

关键注意事项 #

• 秒立方体角度判断必须用归一化后的角度取模360，避免累积角度过大导致逻辑错误；
• 测试时可给左侧面添加特殊背景色，直观确认可见区间，微调角度阈值比如改为85°和275°，规避边缘判断误差。

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