添加translateZ动画导致rotateY旋转镜像问题排查

听起来你遇到的是典型的3D变换空间上下文冲突问题——当你给侧边牌组加上translateZ让它们处于中间牌组后方后，卡牌的3D坐标系和旋转逻辑的对齐出现了偏差，导致视觉上的镜像效果。下面是我整理的几个排查和解决思路，亲测有效：

1. 确保统一的3D空间上下文 #

所有卡牌的共同父容器必须设置transform-style: preserve-3d和perspective属性，否则每个卡牌的3D变换会被浏览器扁平化处理，translateZ的效果虽然能显示，但旋转时的坐标系会彻底混乱：

.card-decks-container {
  perspective: 1200px; /* 根据你的布局调整数值，数值越小透视感越强 */
  transform-style: preserve-3d;
}

没有这个设置的话，侧边牌组的Z轴偏移相当于“伪造”的3D效果，旋转时自然会出现不符合预期的镜像。

2. 明确设置旋转的变换原点 #

默认的transform-origin是元素中心，但当元素在Z轴上有偏移时，这个原点的空间位置会发生变化，导致旋转看起来像镜像。显式将变换原点的Z轴值设为0，确保旋转围绕卡牌自身的物理中心进行：

.card {
  transform-origin: 50% 50% 0; /* 固定Z轴原点为0，不受父元素或自身Z偏移影响 */
}

3. 检查变换顺序（关键！） #

3D变换的顺序绝对会影响最终效果！比如先做translateZ(-100px)再旋转，和先旋转再平移，得到的视觉结果完全不同。你需要确保从中间牌组移到左侧牌组时，旋转操作优先于Z轴平移：

// 错误顺序：先平移再旋转，容易导致镜像
card.style.transform = `translateZ(-80px) rotateY(180deg)`;

// 正确顺序：先完成旋转，再调整Z轴位置
card.style.transform = `rotateY(180deg) translateZ(-80px)`;

另外，也可以试试调整旋转角度的正负（比如rotateY(-180deg)），有时候正负角度的变换路径会在Z轴偏移的情况下产生镜像差异。

4. 可视化调试3D空间 #

给每个牌组添加半透明的边框或背景，直观确认它们的3D位置关系，避免你误以为侧边牌组在后方，但实际坐标系搞反了：

.deck {
  border: 1px solid rgba(255, 0, 0, 0.3);
  background-color: rgba(0, 255, 0, 0.1);
}

这样你能清晰看到旋转时卡牌的空间走向，快速定位问题所在。

5. 避免嵌套的3D变换 #

如果侧边牌组的父元素已经设置了translateZ，那么卡牌自身的变换会叠加在父元素的变换之上，导致坐标系嵌套混乱。尽量让所有卡牌的变换都直接基于根容器的3D空间，不要在子容器上单独设置Z轴偏移，而是直接给每个卡牌添加translateZ值。

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