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/