Edit in JSFiddle

<div class="container">
    <div class="windmill">
        <img src="https://lh4.googleusercontent.com/-Cd6ZLx9fpFQ/UR3-SZodV2I/AAAAAAAAB88/Yvy1267vYpc/s700/windmill.jpg"
        alt="" />
    </div>
    <div class="blades">
        <img src="https://lh6.googleusercontent.com/-cCft_DnDiKQ/UR3-RwTd0lI/AAAAAAAAB8w/__UadJLbcDM/s223/blades.png"
        alt="" />
    </div>
</div>

body { 
  position: relative; 
  overflow: hidden; 
  background: #55A6D8;
}
.container {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 10%;
    width: 627px;
    height: 353px;
    margin-left: -314px;
}

.windmill {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 84px;
    width: 399px;
    height: 353px;
}

.blades {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 130px;
    width: 125px;
    height: 126px;
    -moz-animation-name: rotate;
    -moz-animation-duration: 20s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

img {
    max-width: 100%;
    -ms-interpolation-mode: bicubic;
}

@-moz-keyframes rotate {
   0% {
      -moz-transform: rotate(0deg);
   }
   100% {
      -moz-transform: rotate(360deg);
   }
}
@-webkit-keyframes rotate {
   0% {
      -webkit-transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
   }
}