Firefox 中的 css 3d 闪烁问题

Question

我有一个 div，可以将 Y 轴旋转到 -15 度。它在 chrome 中运行良好，但在 firefox 中有非常糟糕的闪烁问题。div 内的图像看起来分散且跳跃。旋转看起来也有点不稳定。

这是 codepen 演示的链接 http://codepen.io/wahidpolin/pen/PZoWbx

$('.chapter').on('click', function() {
  $(this).toggleClass("flip-to-back")

});

.chapters {
  background-color: #ececec;
}
.chapter {
  position: relative;
  height: 266px;
  -webkit-perspective: 1000px;
  box-sizing: border-box;
  cursor: pointer;
  max-width: 374px;
  margin: 0 auto 30px;
}
.chapter .front,
.chapter .back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-duration: .75s;
  -moz-transition-duration: .75s;
  -o-transition-duration: .75s;
  -ms-transition-duration: .75s;
  transition-duration: .75s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
}
.chapter .front {
  background: #fff;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transition: all 1s;
  z-index: 2;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.chapter .back {
  background-color: #fff;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  padding: 0;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transition: all 1s;
}
.chapter .back .chapter-back-top {
  padding: 20px;
}
.chapter .back img,
.chapter .back h3,
.chapter .back h4 {
  display: inline-block;
  float: left;
}
.chapter .back img {
  width: 48px;
  margin: 10px 0 0;
}
.chapter .back h3,
.chapter .back h4 {
  padding: 0 0 0 20px;
}
.chapter .back h3 {
  color: #666;
  margin: 5px 0 10px;
}
.chapter .back h4 {
  color: #777;
}
.chapter .back p {
  padding: 0 20px 20px;
  font-size: 15px;
  text-align: left;
}
.chapter:hover {
  z-index: 10;
}
.chapter:hover .back {
  background-color: #fff;
}
.chapter:hover .front {
  -webkit-transform: rotateY(-15deg);
  -moz-transform: rotateY(-15deg);
  -o-transform: rotateY(-15deg);
  -ms-transform: rotateY(-15deg);
  transform: rotateY(-15deg);
  background: #f7f7f7;
  border: 1px solid #f7f7f7;
}
.chapter:hover .back {
  -webkit-transform: rotateY(165deg);
  -moz-transform: rotateY(165deg);
  -o-transform: rotateY(165deg);
  -ms-transform: rotateY(165deg);
  transform: rotateY(165deg);
}
.chapter .front img {
  width: 100px;
  margin: 30px 0 20px;
}
.chapter h3 {
  font-size: 22px;
  font-weight: 800;
  padding: 7px 25px;
  margin-bottom: 5px;
  color: #333;
  text-transform: none;
  letter-spacing: 0;
}
.chapter h4 {
  padding: 5px;
  color: #000;
}
.chapter.flip-to-back .front {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transform-origin: 50% 50%;
}
.chapter.flip-to-back .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-origin: 50% 50%;
}

<section id="chapters" class="chapters page">
  <div class="container">
    <div class="row">
      <div class="main-heading clearfix">
        <div class="col-md-12 text-center">
          <h1 class="text-center">Chapters</h1>
        </div>
      </div>

      <div class="col-sm-6 col-md-4">
        <div class="chapter text-center">
          <div class="front">
            <img src="http://lorempixel.com/300/300/">
            <h3>Chapter 1</h3>
            <h4>Getting started</h4>
          </div>
          <div class="back">
            <div class="chapter-back-top clearfix">
              <img src="images/chapters/chapter-img-7.svg">
              <h3>Chapter 1</h3>
              <h4>Getting started</h4>
            </div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
          </div>
        </div>
      </div>


    </div>
  </div>
</section>
<!-- end of chapters-->

Answer 1

好吧 according to W3Schools Firefox 从版本 16 开始就支持 transform-origin，但在我看来它的实现不如 -moz-transform-origin。但是，即使使用专有版本，动画中的边框似乎也消失了。对我来说，使用 box-shadow 而不是固定边框:

.chapter .front,
.chapter .back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-duration: .75s;
  -moz-transition-duration: .75s;
  -o-transition-duration: .75s;
  -ms-transition-duration: .75s;
  transition-duration: .75s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 0 1px #ccc;
}