css3 переходы, не работающие в IE

Question

i; m, работающий над флипкардным приложением и использующий переход css для этого, его рабочий класс во всех других браузерах, но в IE он только показывает обратную сторону карты без какого-либо перехода. Есть ли способ решить эту проблему

Вот мой CSS:

#f1_container { position: relative; margin: 10px auto; /*width: 170px;*/ height: 170px; z-index: 1; } .face.back { display: none; } #f1_container { -webkit-perspective: 1000; } #f1_card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; -moz-transform-style: preserve-3d; -moz-transition: all 1.0s linear; -o-transform-style: preserve-3d; -o-transition: all 1.0s linear; -ms-transform-style: preserve-3d; -ms-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); /*-webkit-box-shadow: -10px 10px 10px #aaa; -moz-box-shadow: -10px 10px 10px #aaa; box-shadow: -10px 10px 10px #aaa;*/ } .face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .face.back { display: block; -webkit-transform: rotateY(180deg); -webkit-box-sizing: border-box; -moz-transform: rotateY(180deg); -moz-box-sizing: border-box; -o-transform: rotateY(180deg); -o-box-sizing: border-box; -ms-transform: rotateY(180deg); -ms-box-sizing: border-box; transform: rotateY(180deg); box-sizing: border-box; padding-bottom: auto; color: white; text-align: left; } 

вот HTML часть:

<div id="f1_container"> 
<div class="shadow" id="f1_card"> 
<div class="front face"><img class="img-circle" alt="" src="http://pearlacademy.com/wp-content/uploads/2014/01/stylingFront.png" /></div> 
<div class="back face center"><img src="http://pearlacademy.com/wp-content/uploads/2014/01/stylingBack.png" alt="College For Fashion Designing" width="170" height="170" usemap="#Map1111" class="img-circle" style="border: 0px;" title="College For Fashion Designing" border="0" /> 
    <map name="Map1111"> 
<area shape="rect" coords="9,27,163,60" href="http://pearlacademy.com/ba-honours-courses/fashion-styling-image-design/"> 
    <area shape="rect" coords="25,65,143,95" href="http://pearlacademy.com/postgraduate-diploma-programmes/interior-design-and-styling/"> 
    <area shape="rect" coords="36,123,133,154" href="http://pearlacademy.com/diploma-course/styling-for-interiors/"> 
    <area shape="rect" coords="3,99,166,121" href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-styling-and-image-design/"> 
    </map> 
</div> 
</div> 
</div> 

Answer 1

Попробуйте добавить
-ms-perspective: 1000px;
perspective: 1000px;

ниже
-webkit-perspective: 1000;

в #f1_container. Это может привести к поддержке IE10.

В вашем коде используется много новых функций CSS, и я не знаю разумного способа заставить его работать в IE8. В частности, обратите внимание на совместимость для этих трех функций:

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective 
https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility 
https://developer.mozilla.org/en-US/docs/Web/CSS/transform 

Answer 2

К сожалению, это не способ для вас, чтобы достичь этого с помощью CSS в IE8 и ниже. Вам нужно будет вернуться к реализации JavaScript. Например, вы можете использовать jQuery plugin like flip!.

Для получения дополнительной информации о переходах в IE вы также можете ознакомиться с MSDN documentation on Filters and transitions.

Мой совет для вас - это весить время, необходимое для реализации вышеуказанных методов, и отказаться от причудливых переходов вообще в старых браузерах и сделать что-то более простое на своем месте.