How to Create a Wind Turbine with HTML and CSS?

Wind turbines are the evolution of the classic windmills that can be seen in more rural areas of the world. Their purpose is to reduce reliance on fossil fuels to create energy and also to create energy in a less wasteful manner. They operate by using the kinetic energy of the wind, which pushes the blades of the turbine and spins a motor that converts the kinetic energy into electrical energy for consumer use. – How to Create a Wind Turbine with HTML and CSS?

Wind Turbines are rotating machines that can be used directly for grinding or can be used to generate electricity from the kinetic power of the wind. They provide the clean and renewable energy for us of both home and office. Wind Turbines are a great way to save money and make the environment clean and green. So in today’s tutorial we will code a Wind Turbine with some HTML and CSS. Hope you will like it. Lets start.

HTML Code:

<!DOCTYPE html>
<html lang="en">
      <meta charset="UTF-8"> 
      <title>Wind Turbine</title>
      <div class="wind-turbine"> 
         <div class="roter"> 
            <div class="blade blade1"></div> 
            <div class="blade blade2"></div> 
            <div class="blade blade3"></div> 
         <div class="pole"></div> 

CSS Code:

      --color: white; 
    font-size: 5px; 
    background: white; 
    position: absolute; 
    top: 30%; 
    left: 50%; 
    width: 3em; 
    margin: 2em 0.5em; 
    border-bottom: 80em solid brown; 
    border-right: 1em solid transparent; 
    border-left: 1em solid transparent; 
    width: 6em; 
    height: 6em; 
    background-color: blue; 
    border-radius: 50%; 
    position: absolute; 
    animation-name: rotate; 
    animation-duration: 1s; 
    animation-iteration-count: 1000; 
    animation-timing-function: linear;  
@keyframes rotate{ 
       transform: rotate(360deg); 
          transform: rotate(0deg); 
     width: 32em; 
     height: 1em; 
     background-color: blue; 
     position: absolute; 
     top: 2em; left: 3em;
     border-radius: 0 3em 5em 0; 
     transform-origin: 0 1em; 
     content: ""; 
     background-color: blue; 
     position: absolute; 
     width: 5em; 
     height: 2em; 
     content: ""; 
     width: 1.2em; 
     position: absolute; 
     top: 1em; 
     left: 2em; 
     border-top: 2em solid blue; 
     border-right: 22em solid transparent; 
     border-left: 6em solid transparent; 
     transform: rotate(0deg); 
     transform: rotate(120deg); 
     transform: rotate(240deg); 
Hop you all liked it and share with your friends....


Agha Murtaza is a web designer and WordPress developer with over one year of experience. You can visit his business site here . Murtaza is the CEO of He also has an opinion on just about every subject. You can follow his rants on Twitter @syedmurtazamn.