CSS3 旋轉風車是一種非常炫酷的動態效果，它通過使用 CSS3 的 transform 屬性實現，在網頁中為用戶帶來了視覺上的刺激，達到了極好的交互體驗效果。

.windmill {
position: relative;
margin: 20px auto;
height: 100px;
width: 100px;
animation: rotate 4s infinite linear;
}
.windmill .propeller {
position: absolute;
height: 30%;
width: 10px;
top: 20%;
left: 45%;
border-radius: 5px;
background-color: #ccc;
transform-origin: center bottom;
animation: rotateProp 1s infinite linear;
}
.windmill .propeller.right {
transform-origin: center top;
transform: rotate(90deg);
}
.windmill .propeller.left {
transform-origin: center top;
transform: rotate(-90deg);
}
.windmill .propeller.top {
transform-origin: center bottom;
transform: rotate(180deg);
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes rotateProp {
100% {
transform: rotate(360deg);
}
}

其中，.windmill 代表整個風車的父容器，.propeller 是風車的葉片，通過動畫效果實現旋轉效果。通過調整不同的 transform-origin 和 transform 屬性，使葉片旋轉方向和速度不同，產生了真實的旋轉效果。

總之，CSS3 旋轉風車是一種非常實用的交互效果，通過適當的調整代碼，可以實現不同形態的風車，達到更好的視覺效果。值得廣大前端開發愛好者學習。