Нужна помощь, выясняя, почему этот слайдер не перевернется на задний план в 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 не поддерживает обратную видимость, так что игра тоже.

А что делать?

Вы можете попробовать написать собственное решение javascript с помощью свойства фильтра css и анимации setInterval или просто использовать плагин jquery flip с условным тегом.

Answer 2

Что вам нужно сделать, это дать переднее div более высокое значение z-index, чем задний div, и когда #kard повернут, установите z-index s спереди и сзади. Установите transition-delay передние и задние дела до определенного значения, чтобы для z-index перехода должны быть сделан, когда контейнер вращается на 90 градусов:

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