body{
  background-color: #efff00;
}


#st{
  position:fixed;
  display:flex;
  flex-direction:row; 
  flex-wrap:wrap;
  justify-content:center;
}

.square{
  background-color:#CB88FF;
  width:100px;
  height:100px;
  margin:50px;
   -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;  
}



.square:hover {
    transform:rotate(1000deg);
    -ms-transform:rotate(1000deg);
    -webkit-transform:rotate(1000deg);
    width:100px;
  height:100px;
  border-radius:80%;
  background-image:
    linear-gradient( to right,  #feff66, #CB88FF);
    opacity: 1;

}