CSS 3 : Fisheye : Answer

by richardneililagan

HTML

<div class="fisheye">    
    <div class="icon"></div>    
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
</div>

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;
    -moz-transition:all 0.3s ease-in-out;
    -moz-box-shadow:2px 2px 2px rgba(0,0,0,.45);
}
.icon:hover {
    width:120px; height:120px;
    margin-top:-30px;
    -moz-box-shadow:17px 17px 17px rgba(0,0,0,.25);
    -moz-animation:
        wiggle 1s infinite ease-in-out,
        disco 2s infinite linear
        ;
}
.icon:hover + .icon {
    width:100px; height:100px;
    margin-top:-20px;
    -moz-box-shadow:12px 12px 12px rgba(0,0,0,.32);    
    -moz-animation:wigglelight 2s infinite ease-in-out;
}

.icon:hover + .icon + .icon {
    width:80px; height:80px;
    margin-top:-10px;
    -moz-box-shadow:7px 7px 7px rgba(0,0,0,.40);    ~
}

@-moz-keyframes wiggle {
    0% { -moz-transform:rotate(10deg); }
    50% { -moz-transform:rotate(-10deg); }
    100% { -moz-transform:rotate(10deg); }
}

@-moz-keyframes disco {
    0% { background-color:#f00; }
    33% { background-color:#0f0; }
    67% { background-color:#00f; }
    100% { background-color:#f00; }
}

@-moz-keyframes wigglelight {
    0% { -moz-transform:rotate(5deg); }
    50% { -moz-transform:rotate(-5deg); }
    100% { -moz-transform:rotate(5deg); }
}