css - Firefox的CSS动画旋转问题

我想要一个css旋转，其中我有一个后页和一个前页，在页面加载时应该旋转多次。

在chrome（webkit）中一切正常，但是在Firefox的一半到达动画时，在firefox的首页上将转到错误的一侧。（我没有在其他浏览器上关注atm）

谁能给我提示如何修复它才能在两种浏览器上使用？

这是带有简化示例的Codepen：http://codepen.io/emrox/pen/wBGqgp

这是firefox的一些代码：

.front,
.back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes intro-turn-animation-front {
    0% { transform: rotate3d(0, 1, 0, 360deg); }
    50% { transform: rotate3d(0, 1, 0, 180deg) perspective(400px); }
    100% { transform: rotate3d(0, 1, 0, 1deg); }
}

@keyframes intro-turn-animation-back {
    0% { transform: rotate3d(0, 1, 0, 180deg); }
    50% { transform: rotate3d(0, 1, 0, 0deg) perspective(400px); }
    100% { transform: rotate3d(0, 1, 0, -179deg); }
}

<body>
    <div class="container">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</body>

最佳答案

您正在perspective中应用@keyframes。正确的方法是将其应用于父元素，而不应用于希望透视效果的元素。这就是问题所在。

因此，将perspective应用于.container。

codepen

.front,
.back {
  top: 20%;
  left: 20%;
  display: block;
  position: absolute;
  width: 60%;
  height: 60%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.container {
  position: relative;
  margin: 0 auto;
  top: 10px;
  width: 60%;
  height: 400px;
  -webkit-perspective: 400px;
  perspective: 400px;
}
.front {
  background-color: red;
}
.back {
  background-color: blue;
}
@-webkit-keyframes intro-turn-animation-front {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 1deg);
  }
}
@keyframes intro-turn-animation-front {
  0% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 1deg);
  }
}
@-webkit-keyframes intro-turn-animation-back {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, -180deg);
  }
}
@keyframes intro-turn-animation-back {
  0% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, -179deg);
  }
}
.front {
  -webkit-animation: intro-turn-animation-front 2s ease-in-out 5 normal;
  animation: intro-turn-animation-front 2s ease-in-out 5 normal;
}
.back {
  -webkit-animation: intro-turn-animation-back 2s ease-in-out 5 normal;
  animation: intro-turn-animation-back 2s ease-in-out 5 normal;
}

<html>

<body>
  <div class="container">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</body>

</html>