今天我們來學習如何用HTML做一個簡單的旋轉風車，以下是代碼實現：

首先我們需要一個HTML文件，這里創建一個div容器并給它命名為“windmill”：

<div id="windmill"></div>

然后在CSS中添加以下樣式代碼，設置風車的基本樣式：

#windmill {
position: relative;
width: 100px;
height: 100px;
background: #f1c40f;
border-radius: 50%;
margin: 50px auto;
transition: all 1s ease-in-out;
}
#windmill:before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -10px;
width: 20px;
height: 50px;
background: #3498db;
border-radius: 10px;
transform-origin: bottom center;
transform: rotate(0deg);
transition: all 1s ease-in-out;
}
#windmill:after {
content: "";
position: absolute;
top: 50%;
left: 0;
margin-top: -10px;
width: 50px;
height: 20px;
background: #3498db;
border-radius: 10px;
transform-origin: center right;
transform: rotate(0deg);
transition: all 1s ease-in-out;
}

其中，before和after分別代表風車的兩個翼，設置基本的圓角、旋轉以及變化效果。

最后，在JavaScript中添加代碼實現旋轉效果并改變before和after的角度，代碼如下所示：

var windmill = document.getElementById("windmill");
var angle = 0;
setInterval(function() {
angle += 3;
windmill.style.transform = "rotate(" + angle + "deg)";
windmill.style.WebkitTransform = "rotate(" + angle + "deg)";
windmill.style.msTransform = "rotate(" + angle + "deg)";
windmill.style.MozTransform = "rotate(" + angle + "deg)";
windmill.style.OTransform = "rotate(" + angle + "deg)";
windmill.children[0].style.transform = "rotate(-" + angle + "deg)";
windmill.children[0].style.WebkitTransform = "rotate(-" + angle + "deg)";
windmill.children[0].style.msTransform = "rotate(-" + angle + "deg)";
windmill.children[0].style.MozTransform = "rotate(-" + angle + "deg)";
windmill.children[0].style.OTransform = "rotate(-" + angle + "deg)";
windmill.children[1].style.transform = "rotate(" + angle + "deg)";
windmill.children[1].style.WebkitTransform = "rotate(" + angle + "deg)";
windmill.children[1].style.msTransform = "rotate(" + angle + "deg)";
windmill.children[1].style.MozTransform = "rotate(" + angle + "deg)";
windmill.children[1].style.OTransform = "rotate(" + angle + "deg)";
}, 50);

到此，我們的HTML旋轉風車代碼就完成了。打開網頁，你會看到一個可愛的旋轉風車。