Question

我发现了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 );
}

Answer 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/

卡片翻转不能在IE中工作（11,10等）

1 个答案: