practice css_rotating_banner

<!DOCTYPE html>
<html>
<head>
<style>

.string-rotate{
 width:150px;
 height:150px;
 border:1px solid black;
 border-right:none;
 border-bottom:none;
 border-radius:10px;
 position:relative;
 transform:rotateZ(45deg);
 transform-origin:top left;
 left:200px;
}
.nail-rotate{
 display:block;
 width:10px;
 height:10px;
 border-radius:50%;
 background:black;
 box-shadow:4px 1px 2px 0px rgb(170,170,170);
}
.banner-rotate{
 width:274px;
 height:70px;
 border:1px solid red;
 transform:rotateZ(-45deg);
 position:absolute;
 top:58px;
 left:-35px;
 background-color:red;
 border-radius:10px;
 box-shadow:5px 5px 5px 0px rgba(200,200,200,1);
}
.content-area{
 width:260px;
 height:60px;
 border:1px dashed yellow;
 margin:4px auto;
 border-radius:10px;
 color:yellow;
 font-family:cursive;
} 
.string-rotate:hover{
 animation: vibrate 4s 1;
}
@keyframes vibrate{
 0%{
 transform:rotateZ(45deg);
 }
 12.5%{
 transform:rotateZ(55deg);
 }
 25%{
 transform:rotateZ(45deg);
 }
 37.5%{
 transform:rotateZ(35deg);
 }
 50%{
 transform:rotateZ(45deg);
 }
 62.5%{
 transform:rotateZ(50deg);
 }
 75%{
 transform:rotateZ(45deg);
 }
 87.5%{
 transform:rotateZ(40deg);
 }
 100%{
 transform:rotateZ(45deg);
 }
}
  
</style>
</head>
<body>
  
<div class="string-rotate">
 <span class="nail-rotate">
 </span>
  <div class="banner-rotate">
    <div class="content-area">
      Rotating banner
    </div>
  </div> 
</div>

</body>
</html>

Share