firefox

Question

我有一个div到Y轴到-15deg.它在chrome中工作得很好但是在firefox中有很多闪烁的问题.div里面的图像看起来很分散和跳跃。旋转也看起来很不稳定。

这是codepen demo http://codepen.io/wahidpolin/pen/PZoWbx

的链接

＆＃13;

＆＃13;

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

});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

确定according to W3Schools自版本16以来，Firefox已支持if else，但在我看来它并没有像transform-origin那样实现它。即使使用专有版本，边框似乎也会在动画中消失。对我来说，使用框阴影而不是边框​​固定：

-moz-transform-origin