backface visibility not working in IE11

Question

I am making a book that opens the cover on click. However, for some reason, the back side of the front page doesn't show up in IE. It does work in firefox and chrome. I have tried many things, but I haven't found a solution.

Here is the link to it on codepen. http://codepen.io/modDesigns/pen/LVwpWW

html

<div class="wrapper">
<div class="left">
    <div class="l-front">
        <div class="col-md-12">
            <h1 class="text-center frontTitle">Click to open Book</h1>
        </div>
    </div>
    <div class="l-back">
        <div class="row">
            <div class="col-md-12">
                <div class="tops">
                    <img src="http://theaudiophilegroup.ky/wp-content/uploads/2014/06/person-icon.png" class="img-responsive avatar" width="25" height="25" />
                    <h3 class="mywords"><strong>Sokratus<trong></h3></div>
            </div>
            <div class="col-md-12">
                <h1 class="title addPadding"><strong>Make me your mentor</strong></h1>
                <p class="pad">Like everyday, I was reaching towards my ‘inbox zero’ goal and I found this newsletter from 99u.com. It had this story titled ‘This is why you don’t have a mentor’. I could easily relate to that title. So I was going through the article and suddenly it hit me, what if I don’t seek out for mentors? What if I offer mentorship from my side? Sure I’m relatively new in this business but there are bunch of people who are just starting out. I remember my early days when I clearly did not have sense of... almost anything.</p>
                <p class="pad">Read more ></p>
                <div class="col-md-12">
                    <div class="icons">
                        <i class="fa fa-twitter fa-2x"></i>
                        <i class="fa fa-facebook fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="right">
    <div class="diag">
        </dvi>
    </div>
</div>

Answer 1

To make the transforms work correctly in IE11, you have to animate the back and front sides independently (in opposite directions), not the whole container.

Here's the relevant CSS:

.l-front, .l-back {
  transition: all 2s ease-in-out;
  backface-visibility: hidden; 
}

.l-front {
  z-index: 2;
  transform: rotateY(0deg);
  transform-origin: 0 0;
}

.l-back {
  transform: rotateY(180deg);
  transform-origin: right 0;
  left: -100%;
}

.open .l-front {
  transform: rotateY(-180deg);
}

.open .l-back {
  transform: rotateY(0deg);
}

Your JS can also be massively simplified, you just need to toggle the "open" class on your container:

$('.left').click(function(){
    $(this).toggleClass('open');
});

Updated codepen is here: http://codepen.io/anon/pen/xGvqXj

I have also tidied up some unnecessary styles from your CSS.

Update, 5th Sep 2017

This no longer works in newer versions of IE11 (from 11.0.29 on) as a bug in the handling of backface-visibility was introduced which MS do not plan to fix. :( https://connect.microsoft.com/IE/Feedback/Details/2474735