Javascript 背面可见性在IE11中不起作用

我正在做一本书，一按就打开封面。然而，由于某些原因，首页的背面并没有出现在IE中。它在firefox和chrome中也能正常工作。我试过很多方法，但还没有找到解决办法

这是代码笔上的链接。

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>

单击打开书本
索克拉图斯
让我成为你的导师
就像每天一样，我正朝着“收件箱零”的目标前进，我在99u.com上找到了这篇时事通讯。它有一个标题为“这就是为什么你没有导师”的故事。我可以很容易地理解这个标题。所以当我翻阅这篇文章时，我突然想到，如果我不去找导师怎么办？如果我提供我这边的指导呢？当然，我在这个行业相对来说是新手，但是有很多人才刚刚起步。我记得我很早的时候，我显然没有意识到。。。几乎什么都有
阅读更多信息>

---

要使变换在IE11中正确工作，必须独立地（以相反方向）设置背面和正面的动画，而不是整个容器

以下是相关的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);
}

您的JS也可以大大简化，只需在容器上切换“open”类：

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

更新的代码笔位于此处：

我还整理了一些不必要的样式从您的CSS

更新，2017年9月5日

这在IE11的较新版本（从11.0.29开始）中不再有效，因为在处理

背面可见性时引入了一个错误，MS不打算修复该错误：(
很酷，很高兴它能为您工作！我确实注意到变换看起来非常“3D”在其他浏览器中，但在IE中是平坦的…我希望有一种方法可以使它们相同，但我不是100%确定如何。没关系，我将尝试在IE中使3D看起来更逼真。但是，除此之外，我喜欢它！感谢您的帮助！！！！嗯…这个示例在IE 11中不适用。看不到动画。当单击打开书本时，封面消失，出现一个动画过了一段时间，页面出现了。但是在动画中它是不可见的。嘿@MikeKeskinov，你是对的-它也不再适用于我了！两年前当我写答案时，我在一台Win7 PC上，现在我有了一台Win 10的新电脑，我想IE11中发生了一些变化（它适用于Edge）…快速搜索似乎表明其他人在Win10/IE11上的2D变换有问题。我会看看是否可以用修复程序更新答案。我找不到任何简单的修复程序。现在，我们只是不支持IE的动画。正如所说，它在Edge和任何其他“正常”中都能工作浏览器。对于IE，我刚刚编写了一个修复程序，将3D动画全部禁用。对不起，IE用户。。。。