在CSS中，我們可以通過transform屬性來實現一些非常有趣的特效。今天，我們將會使用這個屬性來實現一個太陽系的旋轉效果。

/* 首先，我們需要定義一些關鍵變量 */
@keyframes orbit {
from { transform: rotate(0); }
to   { transform: rotate(360deg); }
}
.sun {
width: 60px;
height: 60px;
background-color: #fdd835;
border-radius: 50%;
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
animation: orbit 20s linear infinite;
}
.earth {
width: 25px;
height: 25px;
background-color: #4caf50;
border-radius: 50%;
position: absolute;
top: calc(50% - 12.5px);
left: calc(50% - 70px);
animation: orbit 10s linear infinite;
}
.mars {
width: 20px;
height: 20px;
background-color: #b71c1c;
border-radius: 50%;
position: absolute;
top: calc(50% - 10px);
left: calc(50% - 110px);
animation: orbit 15s linear infinite;
}

上面的代碼中我們定義了三個行星，分別是太陽、地球和火星。我們把它們的大小、顏色和位置都設置好了，并且都添加了orbit動畫。這個動畫是實現整個太陽系旋轉效果的核心。

我們需要使用transform屬性來旋轉整個太陽系。我們在sun .sun這個元素上使用這個屬性就可以讓太陽旋轉起來了。

最后，我們只需要在HTML文件中加入這些元素，然后就能夠看到美麗的太陽系旋轉效果了。