Untitled

dabblet.css

@keyframes spin {
  0%   {
    transform: rotateX(0deg) rotateY(0deg)  scale3d(1,1,1);
  }
  100% {
    transform: rotateX(180deg) rotateY(180deg) scale3d(0.3,0.3,0.3);
  }
}
body {
	background-color:lightgrey;
    margin-top: 100px;
}
div.container {
  perspective: 1000;
  perspective-origin: 50% 50%;
}
body.go div.animate {
	animation: spin 1500ms 2 ease-in-out;
	animation-direction: alternate;
}
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">toggle</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 bttn = document.getElementsByTagName('button')[0],
    body = document.getElementsByTagName('body')[0];
bttn.addEventListener('click',function(){
	body.className = '';
	body.className = 'go';
},false);

settings.json

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