花瓣旋轉是一種常見的動畫效果，它可以給頁面增加華麗感，為用戶提供更好的視覺體驗。在這篇文章中，我們將介紹使用 CSS 實現花瓣旋轉效果的方法。

/* 定義動畫 */
@keyframes petal-rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
/* 定義花瓣的樣式 */
.petal {
position: absolute;
width: 50px;
height: 20px;
background-color: #F06292;
border-radius: 50%;
animation: petal-rotate 8s linear infinite;
}
/* 定義花瓣的位置 */
.petal1 {
top: 20%;
left: 55%;
}
.petal2 {
top: 45%;
left: 70%;
}
.petal3 {
top: 70%;
left: 60%;
}

首先，我們需要定義一個 keyframes 規則，來描述花瓣旋轉的動畫效果。該規則的名稱為 petal-rotate，關鍵幀用來描述動畫效果從 0% 到 100% 的變化。在這里，我們定義了兩種狀態：開始狀態為 rotate(0deg)，結束狀態為 rotate(360deg)。這意味著花瓣繞自身的中心點旋轉了一周。

接下來，我們需要定義花瓣的樣式。這里我們將花瓣定義為一個圓形，顏色為粉色，border-radius 設置為 50% 則表示邊角呈圓形。為了讓花瓣進行旋轉，我們將其設置為 absolute 定位，同時為其指定 petal-rotate 動畫，時長為 8s，循環次數為 infinite。

最后，我們需要定義花瓣的位置，分別確定其 top 和 left 屬性。

通過以上步驟，我們即可創建一個漂亮的花瓣旋轉效果，為頁面增添一抹靚麗的風景。