花瓣轉(zhuǎn)動效果是一種非常美麗的CSS3動畫，可以用于網(wǎng)站上的各種裝飾或者背景圖案。下面是一個示例代碼，可以實現(xiàn)一個簡單的花瓣轉(zhuǎn)動效果：

/* 定義一個div作為花瓣容器 */
<div class="petals">
/* 定義花瓣的數(shù)量，可以根據(jù)實際情況調(diào)整 */
<div class="petal-1"></div>
<div class="petal-2"></div>
<div class="petal-3"></div>
<div class="petal-4"></div>
<div class="petal-5"></div>
</div>
/* CSS代碼 */
.petals {
/* 定義容器的寬度和高度 */
width: 200px;
height: 200px;
/* 設(shè)置容器為相對定位，讓后面的子元素可以絕對定位 */
position: relative;
}
.petals div {
/* 定義花瓣的寬度和高度 */
width: 30px;
height: 30px;
/* 設(shè)置花瓣為絕對定位，可以讓它們圍繞著容器的中心旋轉(zhuǎn) */
position: absolute;
/* 定義花瓣的背景顏色和圓角 */
background-color: #f00;
border-radius: 50%;
/* 設(shè)置花瓣動畫的持續(xù)時間和循環(huán)次數(shù) */
animation-duration: 2s;
animation-iteration-count: infinite;
/* 使用關(guān)鍵幀動畫來定義花瓣的移動路徑 */
animation-name: petalsRotate;
}
/* 定義關(guān)鍵幀動畫 */
@keyframes petalsRotate {
/* 定義花瓣在不同時間點(diǎn)的位置和旋轉(zhuǎn)角度 */
0% {
left: 50%;
top: 0%;
transform: rotate(0deg);
}
25% {
left: 100%;
top: 50%;
transform: rotate(90deg);
}
50% {
left: 50%;
top: 100%;
transform: rotate(180deg);
}
75% {
left: 0%;
top: 50%;
transform: rotate(270deg);
}
100% {
left: 50%;
top: 0%;
transform: rotate(360deg);
}
}

上述代碼中使用了關(guān)鍵幀動畫來定義花瓣的移動路徑，每個花瓣的初始位置是容器的中心點(diǎn)，然后在不同的時間點(diǎn)沿著一個正方形軌跡旋轉(zhuǎn)。通過不斷重復(fù)這個動畫，就可以實現(xiàn)一個連續(xù)不斷的花瓣旋轉(zhuǎn)效果。