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

我正在制作一本可在点击时打开封面的书。但是，由于某些原因，IE不会显示首页的背面。它确实适用于Firefox和Chrome。我已经尝试了很多事情，但是还没有找到解决方案。

这是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>

最佳答案

为了使转换在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也可以大大简化，您只需要在容器上切换“打开”类即可:

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

更新的代码笔在这里:http://codepen.io/anon/pen/xGvqXj

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

更新，2017年9月5日

在IE11的较新版本(从11.0.29开始)中，此功能不再起作用，因为引入了backface-visibility处理中的错误，MS不打算修复该错误。 :(
https://connect.microsoft.com/IE/Feedback/Details/2474735

关于javascript - 背面可见性在IE11中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32184803/