body {
  background: #333;
}
#options {
  position: absolute;
  bottom: 20px;
  color: #fff;
  font-size: 150%;
  border: 1px dotted #ddd;
  padding: 5px;
}
#options input {
  display: block;
}
#options input#makeAnimation {
  display: inline;
}
#options label span {
  color: #ddd; font-weight: bold;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
    -moz-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
    -ms-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
    -o-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
    transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  }
  to{
    -webkit-transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
    -moz-transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
    -ms-transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
    -o-transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
    transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
  }
}

#main{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  margin-top: 150px;
  -webkit-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  -moz-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  -ms-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  -o-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: transform 2s linear;
  -moz-transition: transform 2s linear;
  -ms-transition: transform 2s linear;
  -o-transition: transform 2s linear;
  transition: transform 2s linear;
}

#main.animate{
  -webkit-animation: spin 5s infinite linear;
  -o-animation: spin 5s infinite linear;
  animation: spin 5s infinite linear;
}
  
.cube{
  opacity: 1;
  position: absolute;
  height: 100px;
  width: 100px;
}

div.col, div.row, div.lvl{
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}


div.col2{
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  -o-transform: translateX(100px);
  transform: translateX(100px);
}

div.col3{
  -webkit-transform: translateX(200px);
  -moz-transform: translateX(200px);
  -ms-transform: translateX(200px);
  -o-transform: translateX(200px);
  transform: translateX(200px);
}

div.row1{
  -webkit-transform: translateZ(-150px);
  -moz-transform: translateZ(-150px);
  -ms-transform: translateZ(-150px);
  -o-transform: translateZ(-150px);
  transform: translateZ(-150px);
}
div.row2{
  -webkit-transform: translateZ(-50px);
  -moz-transform: translateZ(-50px);
  -ms-transform: translateZ(-50px);
  -o-transform: translateZ(-50px);
  transform: translateZ(-50px);
}
div.row3{
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  -o-transform: translateZ(50px);
  transform: translateZ(50px);
}


div.lvl2{
  -webkit-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
}
div.lvl3{
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
}


.cube div{
  position: absolute;
  height: 60px;
  width: 60px;
  padding: 18px;
  border: 3px solid #000;
  border-radius: 5px;
}

.cube div:nth-child(1){ /*front*/
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  -o-transform: translateZ(50px);
  transform: translateZ(50px);
  background-color  : #fff;
}
      
.cube div:nth-child(2){ /*top*/
  -webkit-transform : rotateX(90deg) translateZ(50px);
  -moz-transform: rotateX(90deg) translateZ(50px);
  -ms-transform: rotateX(90deg) translateZ(50px);
  -o-transform: rotateX(90deg) translateZ(50px);
  transform: rotateX(90deg) translateZ(50px);
  background-color  : yellow;
}

.cube div:nth-child(3){/*bottom*/
  -webkit-transform : rotateX(-90deg) translateZ(50px);
  -moz-transform: rotateX(-90deg) translateZ(50px);
  -ms-transform: rotateX(-90deg) translateZ(50px);
  -o-transform: rotateX(-90deg) translateZ(50px);
  transform: rotateX(-90deg) translateZ(50px);
  background-color  : orange;
}

.cube div:nth-child(4){ /*left*/
  -webkit-transform : rotateY(-90deg) translateZ(50px);
  -moz-transform: rotateY(-90deg) translateZ(50px);
  -ms-transform: rotateY(-90deg) translateZ(50px);
  -o-transform: rotateY(-90deg) translateZ(50px);
  transform: rotateY(-90deg) translateZ(50px);
  background-color  : red;
}

.cube div:nth-child(5){ /*right*/
  -webkit-transform : rotateY(90deg) translateZ(50px);
  -moz-transform: rotateY(90deg) translateZ(50px);
  -ms-transform: rotateY(90deg) translateZ(50px);
  -o-transform: rotateY(90deg) translateZ(50px);
  transform: rotateY(90deg) translateZ(50px);
  background-color  : green;
}

.cube div:nth-child(6){ /*back*/
  -webkit-transform : translateZ(-50px);
  -moz-transform:  translateZ(-50px);
  -ms-transform:  translateZ(-50px);
  -o-transform:  translateZ(-50px);
  transform:  translateZ(-50px);
  background-color  : blue;
}