.square{transition:transform 0.5s ease-in-out;}
.square1:hover{transform:rotate(90deg);}
.square2:hover{transform:rotate(90deg);}
.square3:hover{transform:rotate(-100deg);}
@keyframes square2{0%{transform:rotate(3deg);}
100%{transform:rotate(-3deg);}
}
.swing{animation:swing ease-in-out 1s infinite alternate;transform-origin:center -20px;float:left;box-shadow:5px 5px 10px rgba(0,0,0,0.5);}
.swing:after{content:'';position:absolute;width:20px;height:20px;border:1px solid #999;top:-10px;left:50%;z-index:0;border-bottom:none;border-right:none;transform:rotate(45deg);}
.swing:before{content:'';position:absolute;width:5px;height:5px;top:-14px;left:54%;z-index:5;border-radius:50% 50%;background:#000;}
@keyframes swing{0%{transform:rotate(3deg);}
100%{transform:rotate(-3deg);}
}