An exploration into the CSS 3D space

dabblet.css

/** An exploration into the CSS 3D space 
@import url( darkgoyle.com/prelude );
**/

/* couleur (la mode) d0 */
html { background:hsla(200,100%,50%,.3) }
a { background:hsl(20,100%,50%); 
  color:inherit; text-decoration:none }

/* typographie (scale) dx */
body { font:6em/1 monospace }

/* contenu (des mots) dxy */
* {  margin:0; padding:0; box-shadow:0 0 3px }
[href] { counter-increment:section }
[href]:before { content:counter(section,hebrew) }
[href]:hover:before { content:attr(href) }

/* place (des choses) dxyz */
* { transform-style:preserve-3d; transform-origin:50% }
html { perspective:261em; border:solid; -padding:50% }
body>* { display:block; height:1em; width:1em; margin:auto;
  text-align:center }
 
/* moyen (du temps) dt */
* { transition:all 250ms;
  -animation-delay:60s !important;
  animation-iteration-count:infinite !important;
  animation-timing-function:cubic-bezier(0,1.618,.381,1.618)!important }
@keyframes x { to { transform:rotate3d(1,0,0,1turn) } }
@keyframes xy { to { transform:rotate3d(1,1,0,1turn) } }
@keyframes xyz { to { transform:rotate3d(1,1,1,2turn) } }
	
	
body { animation:xyz 6s }
body>* { animation:xyz 6s reverse }


/* shh! */
:hover * { animation:none !important }

dabblet.html

<a href=1 /> 
<a href=2 />
<a href=3 />
<a href=4 />
<a href=5 />
<a href=6 />
<a href=7 />
<a href=8 />
<a href=9 />
<a href=10 />

dabblet.js

// alert('Hello world!');

settings.json

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