CSS 动画 : Rotate around X-axis?

Question

所以我来了this google doodle ，我想知道如何使用 CSS 进行这种旋转(谷歌涂鸦是一个 gif)。看起来它只围绕一个轴旋转，如果我在 CSS 中进行旋转，它会围绕 x 和 y 轴旋转。 3D 旋转是否可行(从未使用过，所以我不知道)。

我在 JSfiddle 中做了一个基本示例.

HTML:

<div class="rotatediv">
</div>

CSS:

.rotatediv {
  background-color: red;
  width:500px;
  height:500px;
  animation-name:rotate_animation;
  animation-duration: 15s;
  animation-delay:0s;
  animation-iteration-count: infinite;
}

@keyframes rotate_animation {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

Answer 1

诀窍是将一个 div 放在 rotatediv 中，并通过移除其背景颜色使 rotatediv 不可见。改为给 rotatediv 中的 div 设置背景色。

现在借助 position: absolute; 将 div 定位在 rotatediv 中。 父 div 将旋转，子 div 也将旋转，同时保持与父 div 相同的方向。

<img src="https://placehold.it/300x300" />
<div class="rotatediv">
  <div class="object">
    <img src="https://placehold.it/30x30/000000" />
  </div>
</div>

.object {
  text-align: center;
}
img {
  position: absolute;
}

.rotatediv {
  width:300px;
  height:300px;
  animation-name:rotate_animation;
  animation-duration: 15s;
  animation-delay:0s;
  animation-iteration-count: infinite;
}

@keyframes rotate_animation {
  0% {transform: rotate(360deg);}
  100% {transform: rotate(0deg);}
}

https://jsfiddle.net/r8r4hzq2/