Spinning cube

dabblet.css

/* Spinning cube */
@keyframes go {
  0%   {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1,1,1);
  }
  100% {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scale3d(1,1,1);
  }
}
@keyframes back {
  0%   {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1,1,1);
  }
  100% {
    transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) scale3d(1,1,1);
  }
}

@keyframes spin {
  0%   {
    transform: rotateX(0deg) rotateY(0deg)  scale3d(1,1,1);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg) scale3d(0.3,0.3,0.3);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) scale3d(1,1,1);
  }
}
body {
	background-color:lightgrey;
    margin-top: 100px;
}
div.container {
  perspective: 1000px;
  perspective-origin: 50% 50%;
}
div.animate {
  animation: spin 3s 1 linear;
}
body.off div.animate {
  animation: none;
}
div.cube {
  height: 400px;
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 2s linear;
  width: 400px;
}
div.cube div.face {
  background-position:center center;
  height: 360px;
  opacity: 1;
  padding: 20px;
  position: absolute;
  transform: translateZ(200px);
  width: 360px;
}
div.cube div.face:nth-child(1) {
  background-color  : red;
}
div.cube div.face:nth-child(2) {
  background-color  : blue;
  transform         : rotateY(90deg)  translateZ(200px);
}
div.cube div.face:nth-child(3) {
  background-color  : green;
  transform         : rotateY(180deg) translateZ(200px);
}
div.cube div.face:nth-child(4) {
  background-color  : yellow;
  transform         : rotateY(-90deg) translateZ(200px);
}
div.cube div.face:nth-child(5) {
  background-color  : purple;
  transform         : rotateX(-90deg) translateZ(200px) rotate(180deg);
}
div.cube div.face:nth-child(6)  {
  background-color  : silver;
  transform         : rotateX(90deg) translateZ(200px);
}

dabblet.html

<button class="toggle">spin</button>
<button class="toggle">back</button>
<button class="toggle">go</button>
<div class="container">
  <div class="cube animate">
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
  </div>
</div>

dabblet.js

var body = document.getElementsByTagName('body')[0];
body.addEventListener('click',function(e){
	document.querySelector('div.animate').style.webkitAnimationName = e.target.innerHTML;
},false);

settings.json

{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"css"}