perspective

dabblet.css

/* perspective */
* { transition:all 261ms cubic-bezier(.6,0,1,0.6) }
body { perspective:.6em; font-size:400px;
  background:#fff }
 
@keyframes spin {
  38.1% { transform:rotateX(111.24deg) }
  61.8% { transform:rotateY(137.49deg) }}
  
  section { background:hsla(222.45,61.8%,38.1%,.3);
  margin:20% auto; border-radius:.381em;
  width:1em; height:1em;
  transform-origin:38%;
  animation:spin 26180ms infinite alternate  }
  
/* todo:
http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
http://desandro.github.com/3dtransforms/docs/perspective.html
*/

dabblet.html

<section></section>

settings.json

{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}