Question

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

在chrome（webkit）中一切正常，但是当达到动画的一半时，firefox首页会转到错误的一边。（我没注意其他浏览器atm）

任何人都可以给我一个提示如何修复它以适应两种浏览器吗？

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

这是firefox的一些代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您正在perspective内应用@keyframes。正确的方法是将它应用于父元素而不是您希望透视效果的元素上。这导致了这个问题。

因此，在perspective上应用.container。

codepen

＆＃13;

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

＆＃13;

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

＆＃13;

firefox css动画旋转问题

1 个答案:

codepen