div {

align-content: center;
margin: 100px auto;


}

body {

  background-color: black;
}





.pinwheel_red {
  height: 300px;
  width: 300px;
   transform: rotate(180deg);
 
  transition: background 1s ease-in-out;
  background-color: red;


  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: easeInOutQuart;
  animation-direction: alternate;
  animation-delay: 3s;
}


.pinwheel_blue {
  height: 300px;
  width: 300px;
  transform: rotate(90deg);
   
 
  transition: background 1s ease-in-out;
  background-color: blue;


  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: easeInOutQuart;
  animation-direction: alternate;
  animation-delay: 3s;
}


.pinwheel_yellow {
  height: 300px;
  width: 300px;
   
 
  transition: background 1s ease-in-out;
  background-color: yellow;


  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: easeInOutQuart;
  animation-direction: alternate;
   animation-delay: 3s;
}

.pinwheel_red:hover {
  background-color: blue;
   transform: scale(0.5,0.5);
}


.pinwheel_blue:hover {
  background-color: yellow;
  transform: scale(0.5,0.5);
}
  
  


.pinwheel_yellow:hover 
{
transform: scale(0.5,0.5);
  
   background-color: red;
}



@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);

    
  }
}