CSS3 Kaleidoscope

Original: http://jsfiddle.net/simurai/JKZTu/

HTML

<div id="now"></div>
<div id="dream1"></div>
<div id="dream2"></div>
<div id="dream3"></div>
<div id="dream4"></div>
<div id="dream5"></div>
<div id="dream6"></div>

CSS

div {
    display: inline-block;   
    border:none;
    border-radius: 100px;
    padding: 10px;
    cursor: pointer;

    
    -moz-box-shadow: inset rgba(255,255,255,1) 0 0 10px;
    
    background-color: hsla(45,100%,50%,1);
  
    background-position: center center;
    
    -moz-transition: all .6s ease-in-out;
}

#dream1 { padding: 20px; background-image:-moz-element(#now);  }
#dream2 { padding: 30px; background-image:-moz-element(#dream1); }
#dream3 { padding: 40px; background-image:-moz-element(#dream2); }
#dream4 { padding: 50px; background-image:-moz-element(#dream3); }
#dream5 { padding: 60px; background-image:-moz-element(#dream4); }
#dream6 { padding: 70px; background-image:-moz-element(#dream5); }


div:hover {
    background-color: hsla(200,100%,50%,1);
    -moz-transform: rotate(360deg);
}

JavaScript

// CSS3 Kaleidoscope


// Each div uses its left neighbor as a background. It's is made possible with the element() property. You can learn more about it here: is.gd/m65YMr

// Tweet me your fiddles: @simurai





// Note: Currently only works in Firefox 4.