CSS是一種樣式表語言，可以用來美化網頁的布局和樣式，今天我們來學習如何使用CSS做一個旋轉小風車。

.windmill {
width: 100px;
height: 100px;
position: relative;
perspective: 100px;
}
.windmill__blade {
position: absolute;
width: 100%;
height: 2px;
background-color: grey;
transform-origin: left center;
animation: rotate 2s ease-in-out infinite;
}
.windmill__blade--1 {
transform: rotateZ(0deg);
}
.windmill__blade--2 {
transform: rotateZ(120deg);
}
.windmill__blade--3 {
transform: rotateZ(240deg);
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}

代碼解析:

首先，我們創建一個包含旋轉小風車的容器，這里我們用了一個class為"windmill"的div元素，并設置它的width、height、position以及perspective屬性，這個屬性可以讓我們實現3D旋轉。接下來，我們創建三個class為"windmill__blade"的div元素，作為風車的葉片，并設置它們的position、width、height、background-color、transform-origin和animation屬性。

其中，transform-origin屬性設置旋轉中心點，這里我們設置為左邊中心點；animation屬性設置動畫，我們定義一個名為"rotate"的旋轉動畫，時長為2秒，緩動效果為ease-in-out，無限循環。

接著，我們為每個葉片設置不同的transform屬性，分別為0deg、120deg、240deg，這樣就可以實現三個葉片在不同的位置旋轉，達到整個風車旋轉的效果。

最后，定義"rotate"動畫的關鍵幀，從0度到360度，這樣就可以讓整個風車旋轉起來了。

以上就是我們用CSS實現旋轉小風車的方法，希望對大家有所幫助。