*{

  margin:0; 

  padding:0;

}

body{ 

  color:#fff; 

  background:#2c3e50;

  font-size: 12px;

  min-width: 800px;

  display: block;

  position: relative;

}

​

.wrapcube{

  perspective: 2000px;

  perspective-origin: center center;

  width:200px; 

  height:320px;

  position:absolute;   

  top:50px; 

  left:50px;

}

.cube{

  width:100%;

  height:50px;

  margin:0 0 0 0;

  position:relative;

​

  transition:.25s all ease-out;

  transform-style: preserve-3d;

​

  font-family: arial, helvetica, sans-serif;

  text-align: center;

  line-height: 4.5;

}

​

#a{z-index:1;}

#b{z-index:2;}

#c{z-index:3;}

#d{z-index:4;}

#e{z-index:3;}

#f{z-index:2;}

#g{z-index:1;}

.cube[data-rotate='1']{ 

  transform: rotateY(3deg) translateZ(-00px)  translateX(0px); 

}

.cube[data-rotate='2']{ 

  transform: rotateY(6deg) translateZ(-00px) translateX(0px); 

}

.cube[data-rotate='3']{ 

  transform: rotateY(9deg) translateZ(-00px) translateX(0px); 

}

.cube[data-rotate='4']{ 

  transform: rotateY(12deg) translateZ(-00px) translateX(0px); 

}

.cube[data-rotate='5']{ 

  transform: rotateY(15deg) translateZ(-00px) translateX(0px); 

}

.cube[data-rotate='6']{ 

  transform: rotateY(18deg) translateZ(-00px) translateX(0px); 

}

.side{

  width:100%;

  height:100%;

  position:absolute;

  backface:hidden;

}

​

.front { 

  height:50px; 

  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); 

}

.left { 

  height:50px; 

  transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); 

}

.right { 

  height:50px; 

  transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); 

}

.back { 

  height:50px; 

  transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); 

}

.top { 

  height:200px; 

  transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px); 

}

.bottom { 

  height:200px; 

  transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px); 

}

​

#a .side{ background:#16a085; }

#a .front{ background:#1abc9c; }

​

#b .side{ background:#27ae60; }

#b .front{ background:#2ecc71; }

​

#c .side{ background:#2980b9; }

#c .front{ background:#3498db; }

​

#d .side{ background:#8e44ad; }

#d .front{ background:#9b59b6; }

​

#e .side{ background:#f39c12; }

#e .front{ background:#f1c40f; }

​

#f .side{ background:#d35400; }

#f .front{ background:#e67e22; }

​

#g .side{ background:#c0392b; }

#g .front{ background:#e74c3c; }

​

h1{

  font-size: 8em;

  font-family: 'Lobster Two';

  font-style: italic;

  text-align: right;

  line-height: .3;

  display: table;

  position: absolute;

  top: 60px;

  right: 30px;

  text-shadow: 2px 4px rgba(0,0,0,.3);

  color: #ecf0f1;

}

​

h1 small{

  font-size: .2em;

}