CSS Hover Box

by c_vilander

HTML

<p>Hover over the box ...</p>

<div id="box"></div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #eee;
}  

p {
  font: lighter 24px "Helvetica Neue", sans-serif; 
  color: #222;
  letter-spacing: 2px;
}

#box {
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 75px;
  height: 75px;
  border-radius: 15px;
  border: 1px solid #222;  
}

#box:hover {
  -webkit-animation: rotate 2s linear 2 ;
          animation: rotate 2s linear 2;
}


@-webkit-keyframes rotate {
    0%   {-webkit-transform:rotate(0deg) scale(1.0);transform:rotate(0deg) scale(1.0);}
    50%  {-webkit-transform:rotate(180deg) scale(1.4);transform:rotate(180deg) scale(1.4);}
    100% {-webkit-transform:rotate(360deg) scale(1.0);transform:rotate(360deg) scale(1.0);}
}


@keyframes rotate {
    0%   {transform:rotate(0deg) scale(1.0);}
    50%  {transform:rotate(180deg) scale(1.4);}
    100% {transform:rotate(360deg) scale(1.0);}
}