CSS3 Glass Shelf With Animated Icons - Snippet

Preview
HTML
CSS
JS

<div id="shelf">
	
  <!-- Add icons here -->
  <a class="icon" href="#"></a>
  <a class="icon2" href="#"></a>
  <a class="icon3" href="#"></a>
	
  <!-- Surfaces of the shelf -->
  <div class="front"></div>
  <div class="back"></div>
  <div class="top"></div>
  <div class="bottom"></div>
	
</div>

body {
   background: #2574b0; 
}

#shelf {
   -webkit-perspective: 500; 
   position: relative;
   top: 50px;
   width: 400px;
   left: 300px;
}

.icon {
  border: 1px solid rgba(0,0,0,0.27);
  background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(22,127,232,0.65)), to(rgba(0,60,123,0.65)));
  background-image: -webkit-linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
  background-image: -moz-linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
  background-image: -o-linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
  background-image: -ms-linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
  background-image: linear-gradient(top, rgba(22,127,232,0.65), rgba(0,60,123,0.65));
  -webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  -moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 50;
  cursor: pointer;
  top: -15px;
  left: 50px;
  
  -webkit-transition: all .2s ease;
}

.icon2 {
  border: 1px solid rgba(0,0,0,0.27);
  background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(242,171,43,0.65)), to(rgba(225,123,25,0.65)));
  background-image: -webkit-linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
  background-image: -moz-linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
  background-image: -o-linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
  background-image: -ms-linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
  background-image: linear-gradient(top, rgba(242,171,43,0.65), rgba(225,123,25,0.65));
  -webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  -moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 50;
  cursor: pointer;
  top: -15px;
  left: 128px;
  
  -webkit-transition: all .2s ease;
}

.icon3 {
  border: 1px solid rgba(0,0,0,0.27);
  background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(209,237,233,0.65)), to(rgba(0,191,162,0.65)), color-stop(3%, rgba(193,233,227,0.65)), color-stop(12%, rgba(177,228,220,0.65)), color-stop(90%, rgba(89,210,191,0.65)));
  background-image: -webkit-linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
  background-image: -moz-linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
  background-image: -o-linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
  background-image: -ms-linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
  background-image: linear-gradient(top, rgba(209,237,233,0.65), rgba(193,233,227,0.65) 3%, rgba(177,228,220,0.65) 12%, rgba(89,210,191,0.65) 90%, rgba(0,191,162,0.65));
  -webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  -moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 50;
  cursor: pointer;
  top: -15px;
  left: 205px;
  
  -webkit-transition: all .2s ease;
}

.icon:hover, .icon2:hover, .icon3:hover {
  top: -22px;
}

.front, .back {
  border: 1px solid rgba(0,0,0,0.27);

  background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(252,252,252,0.2)), to(rgba(191,191,191,0.2)), color-stop(3%, rgba(247,247,247,0.2)), color-stop(12%, rgba(242,242,242,0.2)), color-stop(90%, rgba(217,217,217,0.2)));
  background-image: -webkit-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
  background-image: -moz-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
  background-image: -o-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
  background-image: -ms-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
  background-image: linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));

  -webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  -moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);

  width: 300px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 39px

}

.back {
  width: 273px;
  left: 13px;
  top: 13px;
  opacity: 0.2;
}

.top, .bottom {
  border: 1px solid rgba(0,0,0,0.27);
  
  position: absolute;

  background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(252,252,252,0.2)), to(rgba(191,191,191,0.2)), color-stop(3%, rgba(247,247,247,0.2)), color-stop(12%, rgba(242,242,242,0.2)), color-stop(90%, rgba(217,217,217,0.2)));
  background-image: -webkit-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
  background-image: -moz-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
  background-image: -o-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
  background-image: -ms-linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));
  background-image: linear-gradient(top, rgba(252,252,252,0.2), rgba(247,247,247,0.2) 3%, rgba(242,242,242,0.2) 12%, rgba(217,217,217,0.2) 90%, rgba(191,191,191,0.2));

  -webkit-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  -moz-box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);
  box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.3);

  width: 287px;
  height: 50px;
  left: 6px;
  -webkit-transform: rotateX(60deg);
}
  
.bottom {
    top: 15px;
    opacity: 0.2;
}