我想要一个 css 旋转，其中我有一个背面和一个首页，应该在页面加载时旋转多次。
在 chrome (webkit) 中一切正常，但在 firefox 上，当动画播放到一半时，首页会转向错误的一侧。 (我没有关注其他浏览器 atm)
任何人都可以给我提示如何修复它以在两种浏览器上工作吗？
这是带有精简示例的代码笔: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>最佳答案
您正在 @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>关于css - firefox css 动画旋转问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27448627/