最近，在網站上看到了很多精美的旋轉效果，感到十分驚艷。而這種效果是可以用CSS來實現的。下面我們將使用CSS編寫一個簡單的旋轉示意圖，并解釋每一段代碼的含義。

/* 定義容器的樣式 */
.container {
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
border: 1px solid #ccc;
}
/* 定義圖形的樣式 */
.box {
width: 50px;
height: 50px;
background-color: #f00;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
animation: rotate 2s linear infinite; /* 添加動畫效果 */
}
/* 定義旋轉動畫 */
@keyframes rotate {
from {
transform: rotate(0deg); /* 從0度開始旋轉 */
}
to {
transform: rotate(360deg); /* 旋轉一圈 */
}
}

以上代碼定義了一個容器和一個內嵌的圖形。容器設置了位置屬性為相對定位，并且邊框為實線。圖形則是一個寬高為50px的正方形，背景色設為紅色，設置了絕對定位，并讓其水平垂直居中。同時，將圖形設為無限循環的旋轉動畫。

添加@keyframes來定義旋轉動畫。其中from表示從動畫開始時，旋轉角度為0度；to表示到達動畫結束時，旋轉角度為360度。圖形每次旋轉一圈共需要2秒，這個時間可以根據實際需求自行更改。

這是一個簡單的CSS旋轉示意圖演示，精妙的CSS動態效果為我們的頁面增色不少。希望本篇文章能給大家帶來一點CSS動畫的靈感。Enjoy it！