firefox css动画旋转问题答案

【问题标题】：firefox css animation rotate issuefirefox css动画旋转问题
【发布时间】：2014-12-13 02:24:12
【问题描述】：

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

在 chrome (webkit) 中一切正常，但在 Firefox 上，当动画到达一半时，首页转向错误的一侧。（我不关注其他浏览器atm）

谁能给我一个提示如何修复它以在两种浏览器上工作？

这是带有精简示例的代码笔：http://codepen.io/emrox/pen/wBGqgp

这是一些火狐的代码：

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

【问题讨论】：

标签： css firefox animation rotation

【解决方案1】：

您在@keyframes 中应用perspective。正确的方法是将其应用于父元素而不是您想要透视效果的元素。这就是问题的根源。

所以，在.container 上应用perspective。

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>

【讨论】：