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

Question

我正在制作一本点击打开封面的书。然而，由于某种原因，首页的背面并没有出现在 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>

Answer 1

要使变换在 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');
});

更新的代码笔在这里: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