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也可以大规模简化，您只需要在容器上切换“打开”类：

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

更新的codepen在此处：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

背面可见性在IE11中无效

1 个答案: