为什么可以处理CSS3 3D变换？
我创建了一个3D旋转的立方体，它在Chrome和Firefox中效果很好。但是，它在Safari（桌面和移动设备）中根本没有动画。
我正在使用CSS上的自动改装器，因此应该没有问题，但是我似乎无法解决为什么我无法在Safari中进行动画制作。我正在使用Safari不支持的CSS规则吗？
这是我在整个立方体上拥有的内容：
.cube {
position: relative;
transform-style: preserve-3d;
animation-name: rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform: rotateX(90deg) rotateY(90deg);
}
您可以在此处查看完整代码：
I have a 3D rotating cube I created that works great in Chrome and Firefox. However it does not animate at all in Safari (desktop and mobile).
I am using the autoprefixer on the CSS so there should be no issue there, however I can't seem to solve why I can't get it to animate in Safari. Are there some CSS rules I am using that Safari doesn't support?
Here is what I have on the overall cube:
.cube {
position: relative;
transform-style: preserve-3d;
animation-name: rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform: rotateX(90deg) rotateY(90deg);
}
You can view the full code here:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我最终发现了这个问题。显然，Safari不喜欢只有两个关键帧的动画。我继续添加了以下动画的50％，现在可以在Safari上使用。我也更新了Codepen上的代码。
I ended up finding the issue. Apparently Safari doesn't like animations with only two keyframes. I went ahead and added the below at 50% of the animation and it now works on Safari. I updated the code on Codepen as well.