Clockwork Orange

dabblet.css

/**
 * Clockwork Orange
 */
body{background:url("http://oranger.me/images/Linen_cr.jpg");}
.orange, .gear-a, .gear-b, .gear-c{
	background-image:url('https://dl.dropbox.com/u/31132753/appssprite.png');
	background-repeat:no-repeat; 
}
.engine{position:relative; margin:50px auto; display:block; width:223px; height:325px;}
.engine-part{
	position:absolute; 
	display:block;
	//background-color:#999; 
}
.orange-shadow{
	width:221px; height:223px;
	display: block;
	box-shadow: inset 0px 0px 20px black;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-110px;
	border-radius:50%;
}
.orange{
	width:223px; 
	//height:325px;
	height:215px;  
	opacity:0.7;
	background-position: -336px -7px;
	z-index:110;
}
.gear-a{
	width:207px; height:207px; 
	background-position: -6px -4px;
	top:110px; left:8px;
	z-index:70;
	-webkit-animation: rotate 18000ms linear infinite;
}
.gear-b{
	width:99px; height:98px; 
	background-position: -218px -4px;
	top:205px; left:95px;
	z-index:90;
	-webkit-animation: rotate 8000ms linear infinite;
}
.gear-c{
	width:110px; height:109px; 
	background-position: -218px -107px;
	top:160px; left:20px;
	z-index:80;
	-webkit-animation: rotate-back 9000ms linear infinite;
}
.piston-container{
	width:45px; 
	height:120px;
	top:144px; left:109px;
	z-index:100;
	//background:white;
	-webkit-animation: piston-move 8000ms linear infinite;

}
.piston{
	width:16px;
	height:120px;
	background-color:#333;
	bottom:0px; right:15px;
	transform:rotate(-15deg);
	box-shadow:0 0 5px rgba(0,0,0,0.7);
	border-radius:8px;
	-webkit-animation: piston-angle 8000ms linear infinite;
	
}


/*rotate*/
@keyframes "rotate" {
 from {
   	transform: rotate(0deg);
 }
 to {
   	transform: rotate(360deg);
 }
}
/*rotate-back*/
@keyframes "rotate-back" {
 from {
   	transform: rotate(0deg);
 }
 to {
   	transform: rotate(-360deg);
 }
}
/*piston-move
@keyframes "piston-move" {
   0% {top:145px; left:140px;}
  25% {top:166px; left:122px;}
  50% {top:143px; left:106px;}
  75% {top:122px; left:124px;}
 100% {top:145px; left:140px;}
}*/
@keyframes piston-move {
	from {
		transform: rotate(0deg)
		           translate(-23px)
		           rotate(0deg);
	}
	to {
		transform: rotate(360deg)
		           translate(-23px) 
		           rotate(-360deg);
	}
}
/*piston-angle*/

@keyframes "piston-angle" {
  0% {transform:rotate(-10deg);bottom:-2px;right:10px;}
  50% {transform:rotate(-45deg);bottom:-10px; right:40px;}
  100% {transform:rotate(-10deg);bottom:-2px;right:10px;}
}

dabblet.html

<div class="engine">
	<span class="engine-part orange"></span>
	<span class="engine-part gear-a"></span>
	<span class="engine-part gear-b"></span>
	<span class="engine-part gear-c"></span>
	<span class="engine-part piston-container">
		<span class="engine-part piston"></span>

	</span>
	<span class="orange-shadow"></span>
</div>

settings.json

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