CSS动画：绕X轴旋转？答案

【问题标题】：CSS Animation: Rotate around X-axis?CSS动画：绕X轴旋转？
【发布时间】：2017-09-03 17:04:04
【问题描述】：

所以我找到了this google doodle，我想知道如何使用 CSS 进行这种旋转（google doodle 是一个 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);}
}

【问题讨论】：

标签： css animation transform css-animations

【解决方案1】：

诀窍是在 rotatediv 中放置一个 div，并通过删除它的背景色使 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/

【讨论】：