CSS中rotate3d参数不同但变换效果一致的问题求助

原问题原因 #

你遇到的情况核心在于rotate3d的轴方向反转+180度旋转，本质和原变换视觉等价。

rotate3d的底层规则是：rotate3d(-x, -y, -z, angle) 完全等价于 rotate3d(x, y, z, -angle)。而180度的反向旋转（-180deg）和正向180deg视觉效果完全一致——绕任意轴转半圈，不管方向，最终元素的位置都是对称重合的。

你的原代码里：

• .c1 是绕(1,1,0)轴转180deg
• .d1 是绕(-1,1,0)轴转180deg，等价于绕(1,-1,0)轴转-180deg（即180deg），这种对称轴的180度旋转，最终视觉效果自然完全相同。

你的修复代码存在的问题 #

1. 关键帧里的transform重复定义：同一个关键帧中写两个transform，后面的会直接覆盖前面的。比如top1的0%里，只有transform: rotate3d(0, 0, 0, 90deg)生效，前面的声明会被浏览器忽略。
2. 动画名称不匹配：.a1引用的是left1动画，但你只定义了top1和bottom1，没有对应left1/right1，动画根本不会触发。
3. 无效的rotate3d参数：rotate3d(0,0,0,xxx)是无效的，旋转轴不能是零向量，浏览器会直接跳过这个变换。

正确解决方案 #

要实现两个不同方向的3D旋转效果，你需要调整旋转角度（避开180deg），或者调整旋转轴的分量组合，让轴方向的反转能带来明显视觉差异。

示例1：改用90deg旋转，直接区分轴方向 #

.c1 {
  transform-origin: center center;
  transform: rotate3d(1, 1, 0, 90deg); 
  transition-duration: 2s;
}

.d1 {
  transform-origin: center center;
  transform: rotate3d(-1, 1, 0, 90deg); 
  transition-duration: 2s;
}

此时两个元素的旋转方向会出现明显差异，因为90deg的正向/反向旋转视觉区别很大。

示例2：修正后的动画实现方案 #

如果需要动画过渡效果，修正后的代码如下：

.a1 {
  animation: 2s ease-in rotate-left;
}
.b1 {
  animation: 2s ease-in rotate-right;
}

@keyframes rotate-left {
  0% {
    transform: rotate3d(0,0,0,0deg); /* 初始无旋转状态 */
  }
  100% {
    transform: rotate3d(1, 1, 0, 90deg); /* 绕(1,1,0)轴转90deg */
  }
}

@keyframes rotate-right {
  0% {
    transform: rotate3d(0,0,0,0deg);
  }
  100% {
    transform: rotate3d(-1, 1, 0, 90deg); /* 绕(-1,1,0)轴转90deg */
  }
}

这样两个动画会呈现完全不同的旋转方向，不会出现视觉一致的问题。

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