CSS3可以實現很多炫酷的動畫效果，其中公轉自轉是一種常見的效果。建議在HTML中使用div標簽作為需要實現公轉自轉的元素，并使用CSS3屬性transform中的rotate屬性來實現。同時，我們可以使用keyframes來讓元素實現自轉。

/* 公轉 */
div {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
/* 自轉 */
div::before {
content: '';
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
border-radius: 50%;
background: #fff;
animation: orbit 5s linear infinite;
}
@keyframes orbit {
0% { transform: rotate(0) translateX(100px) rotate(0); }
100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

以上代碼實現了一個在頁面中旋轉的圓圈。通過在div中加入before偽元素，并使其繞著div中心旋轉，我們實現了圓圈的自轉。而在div中使用了keyframes的動畫，我們實現了圓圈的公轉。