我一直在研究用CSS制作的3D图像，当时的想法是向其中添加某种动画并将其用作我作品集中的中心部分，不幸的是，我一直难以使动画看起来光滑。
我不确定这是由CSS动画的限制还是由我在3D模式下工作引起的，但我无法使其看上去完全正确。
到目前为止，我已经尝试了许多不同的值，并添加了更多关键帧，希望动画能够使自己平滑起来，但是我没有任何运气。
我有一个带有所有代码的Codepen，可以在here中找到它。
我将所述关键帧动画放置在CSS文件的顶部，命名为g++ -o testPorts.exe testPorts.cpp -lsetupapi -mwindows
除非我一直盯着它看了很长时间，而且我的眼睛在戏弄我，否则该动画目前具有“弹跳”的感觉。
This Codepen可以更准确地表示我希望旋转的样子。
答案 0 :(得分：1)
您2个不同旋转的顺序是错误的，您应该在rotateY之前设置rotateX。如果这样做，动画将变得更加容易，只需在Y轴上旋转360度即可：
@keyframes loading-cube {
0% {transform: translateZ(-800px) rotateX(-19deg) rotateY(0deg);}
100% {transform: translateZ(-800px) rotateX(-19deg) rotateY(360deg);}
}