卡片翻转在 IE（11、10 等）中不起作用答案

【问题标题】：card flip doesn't work in IE (11, 10, etc)卡片翻转在 IE（11、10 等）中不起作用
【发布时间】：2014-07-19 14:13:56
【问题描述】：

我找到了 David Desandro 关于 CSS3 转换的教程，但发现他的代码在 IE 中不起作用...

http://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html

请注意，当单击“翻转”时，唯一发生的情况是卡片 1 仍然显示而卡片 2 被隐藏...有人知道发生了什么并对此进行了修复吗？

这是他用于这个效果的代码

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  border: 1px solid #CCC;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: right center;
     -moz-transform-origin: right center;
       -o-transform-origin: right center;
          transform-origin: right center;
}

#card.flipped {
  -webkit-transform: translateX( -100% ) rotateY( -180deg );
     -moz-transform: translateX( -100% ) rotateY( -180deg );
       -o-transform: translateX( -100% ) rotateY( -180deg );
          transform: translateX( -100% ) rotateY( -180deg );
}

#card figure {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}

#card .front {
  background: red;
}

#card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

【问题讨论】：

请将相关代码添加到您的问题中。
该链接包含相关代码。这真的有必要吗？
是的，这是必要的：“With your help, we're working together to build a library of detailed answers to every question about programming.”About。链接往往会腐烂，如果您的问题缺少代码，那么问题和答案对未来的访问者没有用处。 JS呢？
好的。感谢您的澄清。

标签： css internet-explorer transform internet-explorer-10 internet-explorer-11

【解决方案1】：

Internet Explorer 当前不支持 CSS 转换属性“preserve-3d”，这就是演示无法运行的原因。但是，“preserve-3D”目前是 in development 的功能之一。

您可以在此处阅读有关 Preserve-3D 的信息：http://www.w3.org/TR/css3-transforms/#transform-style-property

如果您有兴趣了解 IE 团队目前正在开发的任何其他功能，请查看：http://status.modern.ie/

【讨论】：

谢谢！在深入研究之后，我也意识到了这一点。如果有人为此提出了解决方案，我仍然很感兴趣。