CSS 3D传送带开发：文本需正面向观众的实现难题

核心思路：反向变换抵消父级3D影响 #

父元素的3D透视与变换会被子元素继承，要让文本保持正面朝向观众，核心是给文本容器添加与所在父容器完全相反的3D变换，抵消继承的变换效果。

1. 处理Item内的动态文本 #

假设你的Item结构如下：

<div class="row">
  <div class="item">
    <div class="item-text">文本内容</div>
  </div>
</div>

当.row或.item应用了3D变换（如rotateY/translateZ），给.item-text添加反向变换：

/* 示例：假设父级item有rotateY(90deg) + translateZ(100px) */
.item-text {
  transform: rotateY(-90deg) translateZ(-100px);
  will-change: transform; /* 开启硬件加速，避免文本模糊 */
}

如果变换是动态切换（比如.clockwise类改变变换参数），用CSS变量绑定变换值更高效：

.item {
  --rotate-y: 90deg;
  --translate-z: 100px;
  transform: rotateY(var(--rotate-y)) translateZ(var(--translate-z));
}
.item-text {
  transform: rotateY(calc(-1 * var(--rotate-y))) translateZ(calc(-1 * var(--translate-z)));
}

切换类时只需修改CSS变量值，无需重复编写变换规则。

2. 处理中心固定文本 #

中心文本无需参与3D空间，直接移出3D透视容器，放在同级绝对定位容器中即可：

<!-- 3D传送带容器 -->
<div class="carousel-3d">
  <div class="row">...</div>
</div>
<!-- 中心文本单独放置 -->
<div class="center-text">
  <span>中心固定文本</span>
</div>

用CSS实现居中并确保层级：

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* 确保文本在传送带之上 */
}

这种方式彻底隔离3D变换影响，文本始终保持平面朝向。

3. 进阶：切断3D变换传递 #

如果必须将文本放在3D容器内，可通过transform-style: flat切断3D变换的继承链：

.item {
  transform-style: preserve-3d; /* 父级保持3D空间 */
}
.item-text-wrapper {
  transform-style: flat; /* 切断3D传递，内部文本不受父级3D影响 */
}

适合文本无需参与3D空间，但必须嵌套在3D容器内的场景。

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