如何修复IE中rotateY(180deg)实现的<div>翻转过渡问题？

嘿，这个问题我在IE里碰过好多次了！主要是IE对3D CSS变换的渲染逻辑和现代浏览器不太一样，backface-visibility的生效机制有差异，再加上父元素缺少3D空间上下文，就会导致翻转时元素短暂消失。我给你几个关键的修复点，保证能解决问题：

• 给父容器#card添加perspective属性，让IE能正确计算3D空间内的元素层级
• 给所有涉及3D变换的CSS属性加上IE专属的-ms-前缀（IE对无前缀的3D属性支持很差）
• 给父容器添加transform-style: preserve-3d，强制IE保留3D变换的上下文
• 微调translateZ的使用时机，确保翻转前后元素的层级不会出现断层

下面是修改后的完整代码：

<style>
#card { 
  height: 200px; 
  position: relative; 
  width: 200px;
  /* 添加3D空间上下文，IE需要-ms-前缀 */
  perspective: 1000px;
  -ms-perspective: 1000px;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
}
#foreground, #background { 
  /* IE需要-ms-前缀才能识别backface-visibility */
  backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  height: 100%; 
  width: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  transition: transform 0.5s;
  -ms-transition: -ms-transform 0.5s;
}
#foreground { 
  background-color: blue; 
  transform: translateZ(1px) rotateY(0deg);
  -ms-transform: translateZ(1px) rotateY(0deg);
}
#background { 
  background-color: red; 
  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
#card:hover #foreground { 
  transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
#card:hover #background { 
  transform: translateZ(1px) rotateY(0deg);
  -ms-transform: translateZ(1px) rotateY(0deg);
}
</style>
<div id="card">
  <div id="foreground"> Foreground </div>
  <div id="background"> Background </div>
</div>

关键修改说明： #

1. 父容器的3D上下文：perspective和transform-style: preserve-3d是让IE正确解析3D变换的核心，没有这两个属性，IE会把所有3D变换当成2D处理，导致翻转时元素层级混乱。
2. IE前缀：IE10及以下版本需要-ms-前缀才能识别backface-visibility、transform和transition这些3D相关属性，不加前缀的话属性根本不会生效。
3. 层级调整：translateZ(1px)确保元素在翻转时始终处于父容器的3D空间内，不会因为backface的计算错误被意外隐藏。

测试一下，修改后的代码在IE里悬停翻转时，元素会平滑过渡，再也不会出现先消失再显示的情况了！

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