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放在rotateiv内，并通过删除它的背景颜色使rotateiv不可见。将rotate里面的div改为背景颜色。

现在在position: absolute;的帮助下将div放在rotateiv内。父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/

CSS动画：围绕X轴旋转？

1 个答案: