css3 transitions not working in IE

Question

i;m working on a flipcard application and using css transition for this its working cool in all other browsers but in IE its only showig the backface of the card without any transition.Is there any way to solve this problem

Here is my 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; }

here is the HTML part:

<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

Try adding
-ms-perspective: 1000px;
perspective: 1000px;

below
-webkit-perspective: 1000;

in #f1_container . That may get you down to IE10 support.

Your code uses many new CSS features and I am not aware of any reasonable way to make it work in IE8. In particular, look at the compatibility for these three features:

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

Unfortunately there isn't a way for you to achieve this via CSS in IE8 and below. You will need to fall back to a JavaScript implementation. For example you could use a jQuery plugin like flip! .

For further information about transitions in IE you should also check out MSDN documentation on Filters and transitions .

My advice to you is to weigh up the time needed to implement the above methods vs dropping the fancy transitions altogether on older browsers and doing something simpler in its place.