CSS3旋轉風車是一個很有趣的動畫效果，它可以讓風車像真正的風車一樣轉動起來，增加頁面的趣味性和吸引力。下面我們來學習如何實現一個簡單的旋轉風車。

.windmill {
width: 100px;
height: 100px;
position: relative;
}
.windmill__blade {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
transform-origin: bottom right;
animation: windmill-spin 2s ease-in-out infinite;
}
.windmill__blade--2 {
transform-origin: bottom left;
}
.windmill__blade--3 {
transform: rotate(180deg);
transform-origin: bottom right;
}
.windmill__blade--4 {
transform: rotate(180deg);
transform-origin: bottom left;
}
@keyframes windmill-spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

我們首先創建一個容器，即.windmill類，然后在容器內創建四個葉片，即.windmill__blade類，并分別用transform-origin屬性規定它們的變形基點，以便在動畫中實現旋轉效果。接著，我們使用動畫屬性animation，并指定旋轉時間、旋轉方式和循環次數，同時創建一個名為windmill-spin的動畫幀，設置葉片的起始狀態和結束狀態，即0%時葉片角度為0度，100%時葉片角度為360度。

最后，我們在HTML中創建風車實例，即.windmill元素，包含四個葉片實例，即.windmill__blade元素，然后附加相應的類名，即可實現簡單的旋轉風車效果。