我一直在研究用CSS制作的3D图像，我的想法是为它添加某种动画并将其用作我的投资组合的中心部分，不幸的是我一直无法让动画看起来流畅。
我不确定这是由CSS动画的限制还是因为我在3D中工作，但我无法让它看起来很正确。
到目前为止，我已经尝试了很多不同的值，并添加了更多的关键帧，希望动画能够顺利运行，但我没有任何运气。
我有一个Codepen与所有的代码，它可以找到here。
我把关键帧动画放在CSS文件的顶部，它被命名为loading-cube
除非我长时间盯着这个并且我的眼睛在玩弄诡计，否则动画目前有一个“反弹”。
This Codepen更准确地表示了我希望旋转的样子。
您的2个不同旋转的顺序是错误的，您应该在rotateY之前设置rotateX。如果你这样做，动画就容易得多，只需在Y轴上旋转360度：
@keyframes loading-cube {
0% {transform: translateZ(-800px) rotateX(-19deg) rotateY(0deg);}
100% {transform: translateZ(-800px) rotateX(-19deg) rotateY(360deg);}
}