Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created July 10, 2013 09:51
Show Gist options
  • Save anonymous/5965038 to your computer and use it in GitHub Desktop.
Save anonymous/5965038 to your computer and use it in GitHub Desktop.
Download ZIP
css 3d animation, how? (SO)
Raw
dabblet.css
/**
* css 3d animation, how? (SO)
* http://stackoverflow.com/q/9812196/1397351
*/
body { perspective: 50em; }
.cube {
position: relative;
margin: 8em auto 0; /* centering */
padding: 0; /* reset unordered list default */
width: 16em; height: 16em; /* change block element default */
list-style: none; /* reset unordered list default */
/* when not animating, add slash at end to see rotated cube *
transform: rotate3d(5, 12, 13, 35deg); /**/
transform-style: preserve-3d;
/* remove slash at the end to stop animation */
animation: ani 8s infinite linear; /**/
}
@keyframes ani {
to { transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); }
}
.face {
box-sizing: border-box; /* too-lazy-to-compute stuff fix */
position: absolute;
top: 50%; left: 50%;
outline: solid 1px;
margin: -8em; /* centering trick: top and left are 50% and margin is width/2 */
padding: 1.6em;
width: 16em; height: 16em; /* make it square width = height */
opacity: .65;
background: lightblue;
/**
backface-visibility: hidden; /* useful for testing you don't have
the faces of the cube inside out */
}
.face:nth-child(1) { transform: translateZ(8em); }
.face:nth-child(2) { transform: rotateY(180deg) translateZ(8em); }
.face:nth-child(3) { transform: rotateY(90deg) translateZ(8em); }
.face:nth-child(4) { transform: rotateY(-90deg) translateZ(8em); }
.face:nth-child(5) { transform: rotateX(90deg) translateZ(8em); }
.face:nth-child(6) { transform: rotateX(-90deg) translateZ(8em); }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul class='cube'>
<li class='face'>1</li>
<li class='face'>2</li>
<li class='face'>3</li>
<li class='face'>4</li>
<li class='face'>5</li>
<li class='face'>6</li>
</ul>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment