html - 需要帮助弄清楚为什么这个 slider 不会在 ie9/10 中翻转到背景

Question

这个问题与 3d 变换有关。

由于某些奇怪的原因，它会翻转到另一侧，但不会显示前框架对面的内容。

有什么想法吗？

我做了一个 fiddle : https://jsfiddle.net/dvmad/qqda2cuh/1/

代码(HTNL):

<section class="cardcontainer">
<div id="kard">
<figure class="front">Front Text</figure>
<figure class="back">This is a example of the back text. This is a example of the back text.</figure>
</div>
</section>

代码(CSS):

.cardcontainer {
  /*
  width: 200px;
  height: 260px;
  */
  width: 380px;
  height: 230px;
  position: relative;
  margin: 0 auto 40px;
  /*
  border: 1px solid #CCC;     
 -webkit-perspective: 800px;
     -moz-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
          */
}
@media screen  and (min-width:1000px)
{
    .cardcontainer {

  width: 380px;
  height: 230px;
  position:static;
  margin: 0 auto 40px;
    }
}



#kard {
  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;
}

#kard:hover {
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );

       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

#kard figure {
    display: block;
height: 100%;
width: 100%;
line-height: 50px;
color: white;
text-align: center;
font-weight: bold;
font-size: 25px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
margin: 0;
padding-top:25%;

}

#kard .front {
      background-color:#76c430;
}

#kard .back {
  background-color:#3292b1;
  font-size: 15px;
  line-height:20px;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
          padding-left:10px;
          padding-right:10px;

}
/*for cell phone sizes*/
@media screen and (max-width:500px){
    #kard .back {
          padding-left:20px;
          padding-right:20px;
    }
}
#kard .back span{
    max-width:50%;
}

有什么想法吗？

我不太了解 3d 变换的东西，所以我很茫然。

能够捕获一个例子来制作这个，但它在 ie9/10 中不起作用，如前所述。

如有任何帮助，我们将不胜感激。

谢谢，

Answer 1

IE9 不支持转换和背面可见性，所以游戏结束了。

IE10 不支持背面可见性，所以游戏也结束了。

那怎么办呢？

您可以尝试使用 css 过滤器属性和 setInterval 动画编写您自己的 javascript 解决方案，或者只使用一些带有条件标记的 jquery flip 插件。