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

Question

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

由于某种奇怪的原因，它会翻转到另一侧，但不会显示与前框相反的内容。

有什么想法吗？

我做了一个小提琴： 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 中不起作用，如前所述。

任何帮助将不胜感激。

谢谢， D

Answer 1

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

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

那该怎么办？

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

Answer 2

你需要做的是给前面的div一个比后面的div更高的z-index，当#kard旋转时，切换前面和后面的div的z-indexs。将前后 div 的transition-delay 设置为某个值，以便在容器旋转 90 度时完成z-index 过渡：

#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;

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

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



#kard .front {
      background-color:#76c430;
      z-index: 1;
      height: 100%;
      width: 100%;
      transition-delay: 0.3s;
      position: absolute;
      box-sizing: border-box;
}
#kard:hover .front{
  z-index: 0;
}
#kard:hover .back{
  z-index: 1;
}
    #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;
        box-sizing: border-box;
        z-index: 0;
              position: absolue;
        height: 100%;
        width: 100%;
        transition-delay: 0.3s;
    }