做这个案例之前首先要大概了解CSS的transform的属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
看看效果图
打开的时候自动旋转，当鼠标经过的时候加快旋转速度，鼠标移开就恢复原来的速度。
参考代码：（为了美观可以自已加上一直背景图，我这里是空白的背景显得单调）
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>动画</title> ???????<link rel="stylesheet" type="text/css" href="css/animate1.css"/> ???</head> ???<body> ???????????????<div></div> ???????????<div id="one"> ???????????????????????????????<div class="sj"> ???????????????????????????????????</div> ???????????????????????????????<div class="ye"> ???????????????????????????????????</div> ???????????????<div class="ye1"> ???????????????????????????????????</div> ???????????????<div class="re"> ???????????????????????????????????</div> ???????????????<div class="blue"> ???????????????????????????????????</div> ???????????????<div class="blue1"> ???????????????????????????????????</div> ???????????????<div class="green"> ???????????????????????????????????</div> ???????????????????????????????<div class="green1"> ???????????????????????????????????</div> ???????????????????</div> ???????????????????????<div id="mg"> ???????????????????????????????</div> ???????????????????????<div> ???????????????<!--<img src="img/1.jpg" id="img"/>--> ???????</div> ???</body></html>
css:(还有更加简单的方法画出这个风车的，我这里复杂了一点，比较笨重，不够简洁)
*{ ???margin: 0; ???padding: 0;}#s{ ???float: left;}#one:hover{ ???animation:run 0.6s linear infinite; }@keyframes run{ from{ ???transform: rotate(360deg); ???} to{ ???transform: rotate(0deg); ???} } .sj{ ???margin-top: 5px; ???transform: rotate(-46deg); ???position: absolute; ???top:14px; ???left: -49px; ???float: left; ???width: 0; ???height: 0; ???z-index: 2; ???border: 50px solid lightcoral; ???border-color:lightcoral transparent ?transparent ??transparent ?;}.ye{ ???transform: rotate(0deg); ???position: absolute; ???left: 0px; ???top:5px ???float: left; ???width: 0; ???height: 0; ???border: 80px solid #D9B300; ???z-index: 2; ???border-color: transparent ?transparent ??transparent ?#D9B300;}.ye1{ ???transform: rotate(0deg); ???position: absolute; ???left: -80px; ???top:78px; ???float: left; ???width: 0; ???height: 0; ???z-index: 2; ???border: 80px solid orange; ???border-color: transparent orange transparent ??transparent ;}.re{ ???transform: rotate(-46deg); ???position: absolute; ???left: 21px; ???top: -61px; ???float: left; ???z-index: 2; ???width: 0; ???height: 0; ???border: 59px solid brown; ???border-color: transparent ?transparent ??transparent brown;}.blue{ ???transform: rotate(0deg); ???position: absolute; ???left: 80px; ???top:-79px; ???float: left; ???width: 0; ???height: 0; ???z-index: 2; ???border: 80px solid cornflowerblue; ???border-color: ?transparent ?transparent ??transparent cornflowerblue;}.blue1{ ???transform: rotate(-44deg); ???position: absolute; ???left: 102px; ???top: 23px; ???float: left; ???width: 0; ???height: 0; ???z-index: 2; ???border: 58px solid lightblue; ???border-color: lightblue transparent ?transparent ??transparent ; ???animation:gg 1s linear infinite; }.green{ ???transform: rotate(0deg); ???position: absolute; ???left: 80px; ???top: 80px; ???z-index: 2; ???float: left; ???width: 0; ???height: 0; ???border: 81px solid #01814A; ???border-color: #01814A transparent ?transparent ??transparent ; ???z-index: 2; ???}.green1{ ???transform: rotate(-45deg); ???position: absolute; ???top:103px; ???left: 23px; ???float: left; ???width: 0; ???height: 0; ???border: 57px solid seagreen; ???border-color: ?transparent ?seagreen transparent ??transparent ; ???z-index: 2;}#mg{ ???background: salmon; ???width: 15px; ???height: 300px; ???border-radius: 8px; ???position: absolute; ???top:220px; ???????left:680px; ???z-index: 0;}#one{ ???margin: 150px auto auto auto; ???width: 162px; ???transform: rotate(-45deg); ???height: 162px; ???line-height: 168px; ???text-align: center; ???position: relative; ???z-index: 3; ???animation:run 9s linear infinite; }#img{ ???position: relative; ???top:-50px; ???left: 522px; ???z-index: -1;}css制作旋转风车（transform 篇）
原文地址：https://www.cnblogs.com/LCH-M/p/9334892.html