Make images circulate around a center image [on hold]

I am trying to improve my website and I'd like to have some images (linking to webpages) circulating around my favicon.

EDIT: Here is the HTML and CSS I have now. View this at jsfiddle.

CSS:
.rotate:hover {
animation:10s rotateRight infinite linear;
}
@keyframes rotateRight{
0%{ transform:rotate(0deg); transform-origin:50% 50%; }
100%{ transform:rotate(360deg); }
}
.container .row {margin: 80px; text-align: center;}
.container .row img {margin: 0 60px;}
HTML:
<div class="container"> <div class="row"> <a href="http://v2.trex-game.tk"><img class="rotate" src="http://v2.trex-game.tk/favicon.png" alt="T-Rex Game" width="64" height="64"></a> <a href="http://code.prohackr112.tk/"><img class="rotate" src="/img/code.png" alt="ProHackr112 Code" width="64" height=64"></a> </div> <div class="row"> <a href="cube"><img class="rotate" src="https://rubiks.com/images/carousel/solve-it-rubiks-cube.png" alt="Rubik's Cube Experiments" width="96" height="96"></a> <a href="http://prohackr112.tk/"><img src="/favicon.png" alt="ProHackr112 Home" width="128" height="128"></a> <a href="donut"><img class="rotate" src="/img/donut.png" alt="Have A Donut" width="75" height="80"></a> </div> <div class="row"> <a href="https://github.com/prohackr112/"><img class="rotate" src="https://github.com/fluidicon.png" alt="" width="63" height="63"></a> <a href="https://ide.c9.io/prohacker112/prohackr112/"><img class="rotate" src="https://addons.cdn.mozilla.net/user-media/addon_icons/417/417300-64.png" alt="" width="72" height="72"></a> </div> </div>