如何保留translateZ效果并抵消CSS旋转动画，实现文本始终面向用户？

没问题，要让你的.inset文本在父容器旋转时始终正面朝向用户，核心思路就是给文本添加与父元素完全反向的旋转动画，抵消父容器的旋转效果，同时保留translateZ的位移。

修改后的完整CSS代码 #

/* 父容器的旋转动画保持不变 */
@keyframes rotate {
  0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* 新增反向旋转动画，专门用来抵消父元素的旋转 */
@keyframes counterRotate {
  0% { transform: translateZ(120px) rotateX(0) rotateY(0) rotateZ(0); }
  100% { transform: translateZ(120px) rotateX(-360deg) rotateY(-360deg) rotateZ(-360deg); }
}

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
}

.inset {
  margin-top: 40%;
  margin-left: 40%;
  /* 用反向动画替代单独的translateZ，同时实现位移和旋转抵消 */
  animation: counterRotate 10s linear infinite;
  color: grey;
}

/* 你提到的hover效果可以这样写，保持文本正面的同时做交互 */
.inset:hover {
  animation-play-state: paused;
  color: black;
  transform: translateZ(150px) rotateX(0) rotateY(0) rotateZ(0);
}

关键原理说明 #

• 反向旋转抵消：父容器做rotateX(360deg) rotateY(360deg) rotateZ(360deg)的旋转，子元素就做对应的负值旋转rotateX(-360deg) rotateY(-360deg) rotateZ(-360deg)，这样两者的旋转会完全抵消，文本始终保持初始朝向。
• transform顺序：一定要把translateZ(120px)放在旋转之前，因为CSS transform是按顺序执行的——先把文本推到球面的对应位置，再做反向旋转，这样文本才会一直处于正确的3D位置并面向用户。
• 动画同步：子元素动画的时长（10s）和时间函数（linear）必须和父元素完全一致，才能保证旋转抵消的同步性。

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