View Stage **

dabblet.css

/*** View Stage ***/
#viewStage{
	width:450px;
	height:300px;
	margin:5em auto;
	-webkit-perspective: 450px;
	-webkit-perspective-origin:50% 50%;
}

/*** Browsers fix ***/
#overlay{
	width:100%;
	height:100%;
	background-color:#f4f4f4;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
}
#overlay span{
	display:block;
	width:500px;
	margin:9em auto;
	font-size:24px;
	line-height:175%;
	text-align:center;
}
.support{
	display:none;
}
.unsupport{
	display:block;
}

/*** Mozilla fix ***/
@-moz-document url-prefix() {
	#overlay{
		display:none;
	}
	#viewStage{
		overflow:hidden;
	}
	.support{
		display:none;
	}
	.unsupport{
		display:block;
	}
}

/*** Webkit browser ***/
@media screen and (-webkit-transform-3d) {
	#overlay{
		display:none;
	}
	.support{
		display:block;
	}
	.unsupport{
		display:none;
	}
}

/*** Keyframes ***/
@-webkit-keyframes rotation {
	from, to {  }
    10%, 25% { -webkit-transform: rotateX(-90deg); }
    35%, 50% { -webkit-transform: rotateX(-180deg);	}
    60%, 75% { -webkit-transform: rotateX(-270deg);	}
    85%, 100% { -webkit-transform: rotateX(-360deg); }
}
@-webkit-keyframes rotationrevert {
	from, to {  }
    10%, 25% { -webkit-transform: rotateX(90deg); }
    35%, 50% { -webkit-transform: rotateX(180deg);	}
    60%, 75% { -webkit-transform: rotateX(270deg);	}
    85%, 100% { -webkit-transform: rotateX(360deg); }
}
@-moz-keyframes rotation {
	from, to {  }
    10%, 25% { -moz-transform: translateY(0px); }
    35%, 50% { -moz-transform: translateY(-300px);	}
    60%, 75% { -moz-transform: translateY(-600px);	}
    85%, 100% { -moz-transform: translateY(-900px); }
}
@-moz-keyframes rotationrevert {
	from, to {  }
    10%, 25% { -moz-transform: translateY(0px); }
    35%, 50% { -moz-transform: translateY(300px);	}
    60%, 75% { -moz-transform: translateY(600px);	}
    85%, 100% { -moz-transform: translateY(900px); }
}

/*** Cube ***/
.cube{
	position:relative;
	float:left;
	width:90px;
	height:300px;
	
	/* Transform */
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50%;

	/* Animation */
	-webkit-animation-name: rotation;
    -webkit-animation-timing-function: ease; /* callback */
    -webkit-animation-timing-function: cubic-bezier(0.6, -0.8, 0.4, 1.5);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 15s;
	
	-moz-animation-name: rotation;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 15s;
}

/*** Cubet delay and z-index fix ***/
#cube1{
	z-index:1;
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
}
#cube2{
	z-index:2;
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
}
#cube3{
	z-index:3;
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
}
#cube4{
	z-index:2;
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
}
#cube5{
	z-index:1;
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
}

/*** Cube's face Style ***/
.cube div{
	background-color:#000;
	background-size:450px 300px;
	position:absolute;
	
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}
.cube div.fb{
	width:90px;
	height:300px;
}
.cube div.tb{
	width:90px;
	height:300px;
}
.cube div.lr{
	width:300px;
	height:300px;
}

/*** Face image and position ***/
.facefront{
	background-image:url(../image.jpg);
	-webkit-transform: translateZ(150px);  
	-moz-transform: translateY(0px);  
}
.facebck{
	background-image:url(../image3.jpg);
	-webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);
	-moz-transform: translateY(300px);
}
.facetop{
	background-image:url(../image2.jpg);
	-webkit-transform: rotateX(90deg) translateZ(150px);
	-moz-transform: translateY(600px);
}
.facebottom{
	background-image:url(../image4.jpg);
	-webkit-transform: rotateX(-90deg) translateZ(150px);
	-moz-transform: translateY(900px);
}
.faceleft{
	background-color:#000;
	-webkit-transform: rotateY(90deg) translateZ(-60px);
	-moz-transform: scaleX(0);
}
.faceright{
	background-color:#000;
	-webkit-transform: rotateY(-90deg) translateZ(150px); 
	-moz-transform: scaleX(0);
}

#cube1 div{
	background-position:0 0;
}
#cube2 div{
	background-position:-90px 0;
}
#cube3 div{
	background-position:-180px 0;
}
#cube4 div{
	background-position:-270px 0;
}
#cube5 div{
	background-position:-360px 0;
}

/*** reverse effect ***/
.reverse{
	-webkit-animation-name: rotationrevert !important;
	-moz-animation-name: rotationrevert !important;
}
.reverse .facebck{
	-webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px) !important;
	-moz-transform: translateY(-300px) !important;
}
.reverse .facetop{
	-webkit-transform: rotateX(-90deg) translateZ(150px) !important;
	-moz-transform: translateY(-600px) !important;
}
.reverse .facebottom{
	-webkit-transform: rotateX(90deg) translateZ(150px) !important;
	-moz-transform: translateY(-900px) !important;
}

dabblet.html

<div id="viewStage">
	<div id="cube1" class="cube" >
		<div class="facefront fb"></div>
		<div class="facebck fb"></div>
		<div class="faceleft lr"></div>
		<div class="faceright lr"></div>
		<div class="facetop tb"></div>
		<div class="facebottom tb"></div>
	</div>
	<div id="cube2" class="cube reverse" >
		<div class="facefront fb"></div>
		<div class="facebck fb"></div>
		<div class="faceleft lr"></div>
		<div class="faceright lr"></div>
		<div class="facetop tb"></div>
		<div class="facebottom tb"></div>
	</div>
	<div id="cube3" class="cube" >
		<div class="facefront fb"></div>
		<div class="facebck fb"></div>
		<div class="faceleft lr"></div>
		<div class="faceright lr"></div>
		<div class="facetop tb"></div>
		<div class="facebottom tb"></div>
	</div>
	<div id="cube4" class="cube reverse" >
		<div class="facefront fb"></div>
		<div class="facebck fb"></div>
		<div class="faceleft lr"></div>
		<div class="faceright lr"></div>
		<div class="facetop tb"></div>
		<div class="facebottom tb"></div>
	</div>
	<div id="cube5" class="cube" >
		<div class="facefront fb"></div>
		<div class="facebck fb"></div>
		<div class="faceleft lr"></div>
		<div class="faceright lr"></div>
		<div class="facetop tb"></div>
		<div class="facebottom tb"></div>
	</div>
</div>

settings.json

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