perspective

dabblet.css

/* perspective */
* { transition:all 250ms }
body { perspective:1em; font-size:400px }

@keyframes r3d {
  0%, 100% { /*transform:rotateX(137deg);*/
    background:hsla(0,100%,50%,1);
    transform:scale(1) }
  38% { /*transform:rotateY(137deg);*/
    background:hsla(137,100%,50%,.38);
    transform:scale(.618) }
  61% { /*transform:rotateZ(137deg);*/
    background:hsla(222,100%,50%,.61);
    transform:scale(1.618) }
}

section { background:hsla(0,0,0,.3);
  border-radius:1em;
  margin:20% auto;
  width:1em; height:1em;
  transform-origin:50% 50%;
  animation:r3d 1s 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","seethrough":"1","prefixfree":"1","page":"result"}