in a box

dabblet.css

/**
 * in a box
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

/* natural motion demos */
.natural-motion{
	padding: 0;
}
.natural-motion li{
	background-color: #e2e2e2;
	height: 20px;
	width: 20px;
	border-radius: 20px;
	list-style-type: none;
	margin: 0;
	position: absolute;
	top: 20px;
	font-size:0;	
	}
.bob{
	left: 20%; 
	-webkit-animation-name: bob;
	-webkit-animation-duration: .75s;
	-webkit-transition-property: top;
	-webkit-animation-iteration-count: infinite;
}
.pulse{
	box-shadow: 0 0 1px 1px red;
	left: 40%;
	-webkit-animation-name: pulse;
	-webkit-animation-duration: .75s;
	-webkit-transition-property: box-shadow;
	-webkit-animation-iteration-count: infinite;
	
}
.pop{
	left: 60%;
	-webkit-animation-name: pop;
	-webkit-animation-duration: 5s;
	-webkit-transition-property: height, width, margin;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-iteration-count: infinite;
}
.shake{left: 80%;
	-webkit-animation-name: shake;
	-webkit-animation-duration: 1s;
	-webkit-transition-property: left, right;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bob{
	0% {
		top: 20px;
	}
	50% {
		top: 5px;
	}
	100% {
		top: 20px;
	}

}
@-webkit-keyframes shake{
	0% {
		left: 80%;
		-webkit-animation-timing-function: linear;
	}
	20% {
		left: 82%;
		-webkit-animation-timing-function: linear;
	}
	30% {
		left: 78%;
		-webkit-animation-timing-function: linear;
	}
	40% {
		left: 82%;
		-webkit-animation-timing-function: linear;
	}
	50% {
		left: 78%;
		-webkit-animation-timing-function: linear;
	}
	60% {
		left: 82%;
		-webkit-animation-timing-function: linear;
	}
	70% {
		left: 78%;
		-webkit-animation-timing-function: linear;
	}
	80% {
		left: 82%;
		-webkit-animation-timing-function: linear;
	}
	100% {
		left: 80%;
		-webkit-animation-timing-function: linear;
	}

}
@-webkit-keyframes pulse{
	0% {
		/*height: 20px;
		width: 20px;*/
		box-shadow: 0 0 1px 1px red;
	}
	40% {
		/*height: 30px;
		width: 30px;*/
		box-shadow: 0 0 4px 3px red;
	}
	100% {
		/*height: 20px;
		width: 20px;*/
		box-shadow: 0 0 1px 1px red;
	}
}

@-webkit-keyframes pop{ /* not working */
	0% {
		margin: 10px 0 0 10px;
		height: 0px;
		width: 0px;
	}
	28% {
		margin: -5px 0 0 -5px;
		height: 30px;
		width: 30px;
		-webkit-animation-timing-function:ease;
	}
	29% {
		margin: 10px 0 0 10px;
		height: 0px;
		width: 0px;
		-webkit-animation-timing-function: linear;
	}
	100% {
		margin: 10px 0 0 10px;
		height: 0px;
		width: 0px;
	}
}
/* 2d stage */

/* 3d stage */
.stage-3d{}

.cube{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1000;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(-400px);
	-webkit-transition: all 1s;
	-webkit-transform: translateZ(-400px) rotateY(0deg);
	-webkit-animation: rotateCube 5s infinite;
}
.cube .face {
	position: absolute;
top: 0;
left: 0;
width: 800px;
height: 800px;
margin-left: -400px;
margin-top: -400px;
background: -webkit-radial-gradient(center, 500px 500px, transparent, rgba(0, 0, 0, .5)) rgba(42, 146, 206, .8);
opacity: 0;
-webkit-transition: all 1s;
}
@-webkit-keyframes rotateCube {
	0% { -webkit-transform: translateZ(400px) rotateY(0) /*rotateX(0)*/ rotateZ(0); }
	50% { -webkit-transform: translateZ(400px) rotateY(360deg) /*rotateX(0)*/ rotateZ(180deg); }
	100% { -webkit-transform: translateZ(400px) rotateY(360deg) /*rotateX(360deg)*/ rotateZ(360deg); }
}

.slide {
	background: #000;
	background-size: 200px 200px;
}

.scene {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-perspective: 800;
	-webkit-transform-style: preserve-3d;
}

.cube {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1000;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(400px);
	-webkit-transition: all 1s;
}

.face-1,
.face-2,
.face-3,
.face-4,
.face-5,
.face-6 {
	position: absolute;
	top: 0;
	left: 0;
	width: 805px;
	height: 805px;
	margin-left: -400px;
	margin-top: -400px;
	background: -webkit-radial-gradient(center, 500px 500px, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)) rgba(42, 146, 206, .8);
	opacity: 0;
	-webkit-transition: all 1s;
}

.face-1 {
	opacity: 1;
	-webkit-transform: translateZ(400px);
}

.face-2 {
	-webkit-transform: rotateY(40deg) rotateX(15deg) translateY(-2000px);
}

.face-3 {
	-webkit-transform: rotateY(40deg) rotateX(15deg) translateY(2000px);
}

.face-4 {
	-webkit-transform: rotateY(40deg) rotateX(15deg) translateY(-2000px);
}

.face-5 {
	-webkit-transform: rotateY(40deg) rotateX(15deg) translateY(-2000px);
}

.face-6 {
	-webkit-transform: rotateY(40deg) rotateX(15deg) translateY(2000px);
}

.origin {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1000;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	margin-top: -25px;
	background: #fff;
	border-radius: 50%;
	opacity: 0;
	-webkit-transition: all 1s;
}

.code {
	position: absolute;
	top: 50%;
	left: 100px;
	width: 100%;
	margin-top: -350px;
	font-family: 'DIN-Bold';
	font-size: 48px;
	line-height: 76px;
	color: #fff;
	text-shadow: 2px 3px rgba(0, 0, 0, .3);
}

pre strong {
	background: #fff;
	color: #000;
	padding: 10px;
	border-radius: 5px;
}

pre em {
	opacity: .5;
}

pre {
	display: none;
}

dabblet.html

<div class="scene">
    <div class="cube" style="-webkit-transform: translateZ(400px) rotateY(0deg); -webkit-animation: rotateCube 100s infinite; ">
        <div class="face-1" style="-webkit-transform: translateZ(400px) scale(1); "><div class="origin"></div></div>
        <div class="face-2" style="opacity: 1; -webkit-transform: rotateY(90deg) translateZ(400px); ">
        	<ul class="natural-motion">
                <li class="pop">pop</li>
                <li class="bob">bob</li>
                <li class="pulse">pulse</li>
                <li class="shake">shake</li>
            </ul>
        </div>
        <div class="face-3" style="opacity: 1; -webkit-transform: rotateY(180deg) translateZ(400px); "></div>
        <div class="face-4" style="opacity: 1; -webkit-transform: rotateY(270deg) translateZ(400px); "></div>
        <div class="face-5" style="opacity: 1; -webkit-transform: rotateX(90deg) translateZ(400px); "></div>
        <div class="face-6" style="opacity: 1; -webkit-transform: rotateX(270deg) translateZ(400px); "></div>
    </div>
</div><!-- content to be placed inside <body>…</body> -->

dabblet.js

// alert('Hello world!');

settings.json

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