CSS 3 : Fisheye

CSS

body { margin:50px; }
.fisheye { 
    position:fixed; width:auto;
    margin:0 auto;
    text-align:center;
    padding:20px;        
}
.icon {
    width:60px; height:60px;
    float:left;
    background-color:#a00;
    margin:0 10px;     
}

.icon:hover{
     -webkit-animation: rotate 1s infinite linear;                    
}

.icon:hover+.icon{
     -webkit-animation: rotate2ndpartner1s infinite linear;                    
}

@-webkit-keyframes rotate{
    0%{-webkit-transform:scale(2,2) rotate(60deg);} 
    50%{-webkit-transform:scale(2,2) rotate(30deg);}  
    100%{-webkit-transform:scale(2,2) rotate(60deg);}  
}

@-webkit-keyframes rotate2ndpartner{
    0%{-webkit-transform:scale(1.5,1.5) rotate(60deg);} 
    50%{-webkit-transform:scale(1.5,1.5) rotate(30deg);}  
    100%{-webkit-transform:scale(1.5,1.5) rotate(60deg);}  
}

@-webkit-keyframes rotate3rdpartner{
    0%{-webkit-transform:scale(1.5,1.5) rotate(60deg);} 
    50%{-webkit-transform:scale(1.5,1.5) rotate(30deg);}  
    100%{-webkit-transform:scale(1.5,1.5) rotate(60deg);}  
}