实现3D旋转div时在不可见瞬间切换内容的问题

我想在div执行3D旋转的过程中，在它完全不可见的瞬间切换内容。当前实现是让父元素#card在hover状态下执行1秒的rotate3d旋转动画，同时给两个子元素#front和#back设置0.5秒的透明度切换延迟，但现在透明度切换时机过晚，动画出现卡顿，怎么让子元素的切换精准触发在正确时机？

当前代码如下：

CSS代码 #

#card {
  width: 200px;
  height: 200px;
  transition: 1s;
  transform: rotate3d(0, 1, 0, 0deg);
}

#card:hover {
  transform: rotate3d(0, 1, 0, 180deg);
}

#card>div {
  transition-duration: 0s;
  transition-delay: 0.5s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#card #front {
  opacity: 1;
  background: yellow;
}

#card #back {
  opacity: 0;
  transform: rotate3d(0, 1, 0, 180deg);
  background: grey;
}

#card:hover #front {
  opacity: 0;
}

#card:hover #back {
  opacity: 1;
}

HTML代码 #

<div id="card">
  <div id="front">
    front
  </div>
  <div id="back">
    back
  </div>
</div>

问题核心在于3D空间缺失和过渡延迟的精准度不足，调整方式如下：

1. 开启3D渲染上下文：给父元素添加transform-style: preserve-3d，确保子元素在3D空间中正确渲染，避免平面化导致的视觉误差；同时加backface-visibility: hidden隐藏元素背面，优化性能并避免提前显示。
2. 精准控制过渡时机：默认ease运动曲线是慢快慢，旋转到完全不可见（90度）的时间会略早于0.5秒，因此把延迟调至0.48s；如果用linear匀速曲线，直接设0.5s就是精准半程点。
3. 优化过渡细节：把透明度过渡时长设为极短的0.01s，避免0秒切换导致的闪烁，同时保证视觉上是瞬间切换的效果。

调整后的代码：

CSS代码 #

#card {
  width: 200px;
  height: 200px;
  transition: transform 1s; /* 保持默认ease曲线，若要精准匀速改为1s linear */
  transform: rotate3d(0, 1, 0, 0deg);
  transform-style: preserve-3d; /* 开启3D空间 */
  position: relative; /* 给子元素绝对定位提供上下文 */
}

#card:hover {
  transform: rotate3d(0, 1, 0, 180deg);
}

#card > div {
  transition: opacity 0.01s;
  transition-delay: 0.48s; /* 适配ease曲线的半程时机，用linear则改为0.5s */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面，避免提前显示 */
}

#card #front {
  opacity: 1;
  background: yellow;
}

#card #back {
  opacity: 0;
  transform: rotate3d(0, 1, 0, 180deg);
  background: grey;
}

#card:hover #front {
  opacity: 0;
}

#card:hover #back {
  opacity: 1;
}

HTML代码 #

<div id="card">
  <div id="front">
    front
  </div>
  <div id="back">
    back
  </div>
</div>

关键说明 #

• transform-style: preserve-3d是3D旋转的基础，没有它子元素会被扁平化到2D平面，旋转时的视觉判断完全失效。
• 运动曲线决定了半程时间：ease曲线下元素加速旋转，90度点提前；linear匀速则严格在0.5秒到达90度，此时元素完全侧对用户，是切换内容的最佳时机。

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