.string-rotate{
 width:150px;
 height:150px;
 border:1px solid black;
 border-right:none;
 border-bottom:none;
 border-radius:10px;
 position:relative;
 -webkit-transform:rotateZ(45deg);
 -webkit-transform-origin:top left;
 transform:rotateZ(45deg);
 transform-origin:top left;
 left:130px;
}
.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 rgba(221,187,127,1);
 -webkit-transform:rotateZ(-45deg);
 transform:rotateZ(-45deg);
 position:absolute;
 top:58px;
 left:-35px;
 background-color:rgba(221,187,127,1);
 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:white;
 font-family:cursive;
}
.string-rotate:hover{
 -webkit-animation: vibrate 4s 1;
 animation: vibrate 4s 1;
}
@-webkit-keyframes vibrate{
 0%{
 -webkit-transform:rotateZ(45deg);
 -webkit-animation-timing-function:ease-in;
 }
 12.5%{
 -webkit-transform:rotateZ(55deg);
 -webkit-animation-timing-function:ease-in;
 }
 25%{
 -webkit-transform:rotateZ(45deg);
 -webkit-animation-timing-function:ease-in;
 }
 37.5%{
 -webkit-transform:rotateZ(35deg);
 -webkit-animation-timing-function:ease-in;
 }
 50%{
 -webkit-transform:rotateZ(45deg);
 -webkit-animation-timing-function:ease-in;
 }
 62.5%{
 -webkit-transform:rotateZ(50deg);
 -webkit-animation-timing-function:ease-in;
 }
 75%{
 -webkit-transform:rotateZ(45deg);
 -webkit-animation-timing-function:ease-in;
 }
 87.5%{
 -webkit-transform:rotateZ(40deg);
 -webkit-animation-timing-function:ease-in;
 }
 100%{
 -webkit-transform:rotateZ(45deg);
 -webkit-animation-timing-function:ease-in;
 }
}

@keyframes vibrate{
 0%{
 transform:rotateZ(45deg);
 animation-timing-function:ease-in;
 }
 12.5%{
 transform:rotateZ(55deg);
 animation-timing-function:ease-in;
 }
 25%{
 transform:rotateZ(45deg);
 animation-timing-function:ease-in;
 }
 37.5%{
 transform:rotateZ(35deg);
 animation-timing-function:ease-in;
 }
 50%{
 transform:rotateZ(45deg);
 animation-timing-function:ease-in;
 }
 62.5%{
 transform:rotateZ(50deg);
 animation-timing-function:ease-in;
 }
 75%{
 transform:rotateZ(45deg);
 animation-timing-function:ease-in;
 }
 87.5%{
 transform:rotateZ(40deg);
 animation-timing-function:ease-in;
 }
 100%{
 transform:rotateZ(45deg);
 animation-timing-function:ease-in;
 }
}