如何平滑 3D 变换旋转？

Question

我一直在研究用 CSS 制作的 3D 图像，我的想法是向它添加某种动画并将其用作我作品集的中心部分，不幸的是我一直很难让动画看起来流畅。

我不确定这是由于 CSS 动画的限制还是因为我在 3D 中工作，但我无法让它看起来很正确。

到目前为止，我已经尝试了很多不同的值并添加了更多关键帧，希望动画能够自行平滑，但我没有任何运气。

我有一个包含所有代码的 Codepen，可以找到它 here。

我将所述关键帧动画放在CSS文件的顶部，它被命名为loading-cube

除非我一直盯着这个看太久，我的眼睛在欺骗我，否则现在的动画有一个"bounce"。

This Codepen 更准确地表达了我希望我的轮换看起来像什么。

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

edited demo

如何平滑 3D 变换旋转？

How do I smooth out a 3D transform rotation?

css-transitions

css-transforms

css-animations