Вращающаяся аватара

/*------------- by mytorrnado.com ---------------*/
   
@-webkit-keyframes flip {
  0% {
  -webkit-transform: translateZ(0) rotateY(0) scale(1);
  -webkit-animation-timing-function: ease-out;
  }
  40% {
  -webkit-transform: translateZ(150px) rotateY(170deg) scale(1);
  -webkit-animation-timing-function: ease-out;
  }
  50% {
  -webkit-transform: translateZ(150px) rotateY(190deg) scale(1);
  -webkit-animation-timing-function: ease-in;
  }
  80% {
  -webkit-transform: translateZ(0) rotateY(360deg) scale(.95);
  -webkit-animation-timing-function: ease-in;
  }
  100% {
  -webkit-transform: translateZ(0) rotateY(360deg) scale(1);
  -webkit-animation-timing-function: ease-in;
  }
}
@-moz-keyframes flip {
  0% {
  -moz-transform: translateZ(0) rotateY(0) scale(1);
  -moz-animation-timing-function: ease-out;
  }
  40% {
  -moz-transform: translateZ(150px) rotateY(170deg) scale(1);
  -moz-animation-timing-function: ease-out;
  }
  50% {
  -moz-transform: translateZ(150px) rotateY(190deg) scale(1);
  -moz-animation-timing-function: ease-in;
  }
  80% {
  -moz-transform: translateZ(0) rotateY(360deg) scale(.95);
  -moz-animation-timing-function: ease-in;
  }
  100% {
  -moz-transform: translateZ(0) rotateY(360deg) scale(1);
  -moz-animation-timing-function: ease-in;
  }
}
@-o-keyframes flip {
  0% {
  -o-transform: translateZ(0) rotateY(0) scale(1);
  -o-animation-timing-function: ease-out;
  }
  40% {
  -o-transform: translateZ(150px) rotateY(170deg) scale(1);
  -o-animation-timing-function: ease-out;
  }
  50% {
  -o-transform: translateZ(150px) rotateY(190deg) scale(1);
  -o-animation-timing-function: ease-in;
  }
  80% {
  -o-transform: translateZ(0) rotateY(360deg) scale(.95);
  -o-animation-timing-function: ease-in;
  }
  100% {
  -o-transform: translateZ(0) rotateY(360deg) scale(1);
  -o-animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
  transform: translateZ(0) rotateY(0) scale(1);
  animation-timing-function: ease-out;
  }
  40% {
  transform: translateZ(150px) rotateY(170deg) scale(1);
  animation-timing-function: ease-out;
  }
  50% {
  transform: translateZ(150px) rotateY(190deg) scale(1);
  animation-timing-function: ease-in;
  }
  80% {
  transform: translateZ(0) rotateY(360deg) scale(.95);
  animation-timing-function: ease-in;
  }
  100% {
  transform: translateZ(0) rotateY(360deg) scale(1);
  animation-timing-function: ease-in;
  }
}
   
.animated.flip {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flip;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flip;
  -o-backface-visibility: visible !important;
  -o-animation-name: flip;
  backface-visibility: visible !important;
  animation-name: flip;
}
.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
   
.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
}

<a href="$PERSONAL_PAGE_LINK$" title="Посмотреть профиль"><img src="$USER_AVATAR_URL$"></a>

<tr onMouseOver="this.className='flip animated';" onmouseout="this.className='';">
  <td align="center"><a href="$PERSONAL_PAGE_LINK$" title="Посмотреть профиль"><img src="$USER_AVATAR_URL$"></a></td>
  </tr>