IE11中CSS Transform RotateX失效求助：3D促销滚动立方体异常

嘿Willem，IE11在3D CSS变换的支持上确实有点让人头疼——它对transform-style: preserve-3d的支持并不完善，这就是为什么你的立方体只有一个面能显示的原因。别担心，我们可以调整代码逻辑来适配IE11的特性，让你的促销滚动器正常工作。

问题根源 #

IE11不支持通过父元素的transform-style: preserve-3d让子元素处于3D空间中，所以你原来通过rotateX+translateZ构建立方体的方式在IE11里会失效，所有面都会堆叠在同一个平面上，导致只有最上层的面可见。

修复方案 #

我们需要放弃依赖preserve-3d，转而直接在每个面的transform中模拟3D位置，同时添加backface-visibility来控制面的显示：

修改后的完整代码

/*-- Animated Promo Roller (IE11兼容版) --*/
#roller {
  width: 140px;
  height: 28px;
  position: absolute;
  animation-name: spincube;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  /* 移除IE11不支持的preserve-3d */
  transform-origin: center 14px; /* 调整变换原点为立方体中心 */
}

.face1, .face2, .face3, .face4 {
  font-size: 16px;
  line-height: 28px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  width: 140px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  /* 修复IE11中定位偏移的问题，移除原来的margin */
  background: #d71e44; /* Old browsers */
  background: -moz-linear-gradient(top, #d71e44 0%, #c11e44 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Chrome,Safari4+ */
  background: linear-gradient(to bottom, #d71e44 0%,#c11e44 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d71e44', endColorstr='#c11e44',GradientType=0 ); /* IE6-9 */
  backface-visibility: hidden; /* 确保背面不显示 */
}

#roller .face1 {
  transform: rotateX(0deg) translateZ(14px);
}
#roller .face2 {
  transform: rotateX(90deg) translateZ(14px);
}
#roller .face3 {
  transform: rotateX(180deg) translateZ(14px);
}
#roller .face4 {
  transform: rotateX(270deg) translateZ(14px);
}

@keyframes spincube {
  0%,14% { transform: rotateX(0deg); }
  21%,35% { transform: rotateX(-90deg); }
  42%,70% { transform: rotateX(-180deg); }
  77%,91% { transform: rotateX(-270deg); }
  100% { transform: rotateX(-360deg); }
}

/* IE11专属适配：强制开启硬件加速，提升动画流畅度 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #roller, .face1, .face2, .face3, .face4 {
    -ms-transform-style: flat;
    transform-style: flat;
  }
}

<div id="roller">
  <div class="face1">WAS R242,900</div>
  <div class="face2">NOW R227,900</div>
  <div class="face3">SAVE R15,000</div>
  <div class="face4">ON PROMO</div>
</div>

关键修改点说明 #

1. 移除transform-style: preserve-3d：IE11不支持这个属性，我们通过直接给每个面设置translateZ来模拟3D深度
2. 添加backface-visibility: hidden：确保每个面在背向视图时不会显示，避免面重叠
3. 调整定位和变换原点：把每个面的定位改为绝对定位在父元素左上角，调整父元素的transform-origin为立方体的垂直中心，让旋转更自然
4. IE11专属媒体查询：明确设置transform-style: flat，避免IE11尝试解析不支持的3D样式
5. 简化keyframes：去掉了冗余的from,to声明，让动画逻辑更清晰

这样修改后，你的促销滚动器应该就能在IE11里正常显示四个面的旋转切换效果了，和其他浏览器的表现一致。

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