CSS动画：围绕X轴旋转？

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无形。取而代之的是旋转背景色的div。

现在在div里面旋转借助position: absolute;的帮助。 父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/