CSS環繞旋轉是一種非常有趣的效果，可以讓元素在旋轉的同時，呈現出環繞的效果。實現這種效果的方法比較簡單，只需要通過transform屬性和關鍵幀動畫即可。

/* CSS代碼 */
.box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
/* 設置旋轉中心點為元素中心 */
transform-origin: center center;
/* 設置旋轉的起始角度為0度 */
transform: rotate(0deg);
animation: rotate 5s linear infinite;
}
/* 定義關鍵幀動畫 */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box img {
width: 100%;
height: 100%;
position: absolute;
/* 設置圖片的旋轉中心點為左上角 */
transform-origin: left top;
}
.box img:first-child {
/* 設置圖片距離父元素左邊框的距離 */
left: 0;
animation: rotate-img-1 5s linear infinite;
}
/* 定義第一張圖片的關鍵幀動畫 */
@keyframes rotate-img-1 {
0% {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}
.box img:last-child {
/* 設置圖片距離父元素右邊框的距離 */
right: 0;
animation: rotate-img-2 5s linear infinite;
}
/* 定義第二張圖片的關鍵幀動畫 */
@keyframes rotate-img-2 {
0% {
transform: rotate(0deg) translateX(-100px) rotate(0deg);
}
100% {
transform: rotate(-360deg) translateX(-100px) rotate(360deg);
}
}

上面的代碼中，我們先創建了一個帶有兩張圖片的父元素.box，并設置了寬高、居中以及相對定位。然后，我們給.box元素設置了關鍵幀動畫，使其實現旋轉效果。

接下來，我們給兩張圖片設置了絕對定位，并通過transform-origin屬性設置了它們的旋轉中心點。同時，我們通過設置left和right屬性，讓兩張圖片分別距離box元素的左邊框和右邊框。最后，我們又為兩張圖片分別設置了關鍵幀動畫，使其圍繞box元素旋轉。

通過上面的代碼，我們可以很方便地實現一個炫酷的CSS環繞旋轉效果。如果你想嘗試的話，可以把上面的代碼復制到你的編輯器中，然后運行查看效果。祝你好運！