<style>
.holder {width:750px; height:400px; background:#ddd; margin:20px auto; overflow:hidden;}
.frame {position:relative; width:165px; height:400px; margin:0 auto; top:-100px;
perspective: 300px;
perspective-origin: 50% 50%;
-webkit-perspective: 300px;
-webkit-perspective-origin: 50% 50%;
}
.table {width:165px; height:400px; position:relative; margin:0 auto;
transform-origin:50% top -81px;
-webkit-transform-origin:50% top -81px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: spin 10s linear infinite;
-webkit-animation: spin 10s linear infinite;
}
.table div {
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.table div div.top {
transform-origin:left bottom;
transform:rotateX(90deg);
-webkit-transform-origin:left bottom;
-webkit-transform:rotateX(90deg);
}
.table div div.left {
transform-origin:right top;
transform:rotateY(-90deg);
-webkit-transform-origin:right top;
-webkit-transform:rotateY(-90deg);
}
.table div div.right {
transform-origin:left top;
transform:rotateY(90deg);
-webkit-transform-origin:left top;
-webkit-transform:rotateY(90deg);
}
.table div div.bottom {
transform-origin:left top;
transform:rotateX(-90deg);
-webkit-transform-origin:left top;
-webkit-transform:rotateX(-90deg);
}
.table div div.left div.back {
transform-origin:right top;
transform:rotateY(-90deg);
-webkit-transform-origin:right top;
-webkit-transform:rotateY(-90deg);
}
.frame {width:165px; height:300px; position:relative; margin:200px auto;
animation: shake 0.75s linear infinite;
-webkit-animation: shake 0.75s linear infinite;
}
.head {width:165px; height:115px; background: url(storm.jpg) no-repeat -442px -199px; position:absolute;
transform-origin:50% 50% -81px;
-webkit-transform-origin:50% 50% -81px;
animation: head 2.5s linear infinite;
-webkit-animation: head 2.5s linear infinite;
}
.head .top {width:165px; height:162px; background: url(storm.jpg) no-repeat -442px -35px; position:absolute; left:0; top:-162px;}
.head .left {width:162px; height:115px; background: url(storm.jpg) no-repeat -279px -199px; position:absolute; left:-162px; top:0;}
.head .right {width:162px; height:115px; background: url(storm.jpg) no-repeat -608px -199px; position:absolute; left:165px; top:0;}
.head .bottom {width:165px; height:162px; background: url(storm.jpg) no-repeat -442px -314px; position:absolute; left:0; top:115px;}
.head .left .back {width:162px; height:115px; background: url(storm.jpg) no-repeat -116px -199px; position:absolute; left:-162px; top:0;}
.leftarm {width:42px; height:76px; background: url(storm.jpg) no-repeat -121px -62px; position:absolute; left:-12px; top:130px;
transform-origin:left 21px -21px;
-webkit-transform-origin:left 21px -21px;
animation: swingleft 2.5s linear infinite;
-webkit-animation: swingleft 2.5s linear infinite;
}
.leftarm .top {width:42px; height:42px; background: url(storm.jpg) no-repeat -121px -21px; position:absolute; left:0; top:-42px;}
.leftarm .left {width:42px; height:76px; background: url(storm.jpg) no-repeat -81px -62px; position:absolute; left:-42px; top:0;}
.leftarm .right {width:42px; height:76px; background: url(storm.jpg) no-repeat -161px -62px; position:absolute; left:42px; top:0;}
.leftarm .bottom {width:42px; height:42px; background: url(storm.jpg) no-repeat -121px -137px; position:absolute; left:0; top:76px;}
.leftarm .left .back {width:42px; height:76px; background: url(storm.jpg) no-repeat -42px -62px; position:absolute; left:-42px; top:0;}

.rightarm {width:42px; height:76px; background: url(storm.jpg) no-repeat -654px -436px; position:absolute; left:135px; top:130px;
transform-origin:left 21px -21px;
-webkit-transform-origin:left 21px -21px;
animation: swingright 2.5s linear infinite;
-webkit-animation: swingright 2.5s linear infinite;
}
.rightarm .top {width:42px; height:42px; background: url(storm.jpg) no-repeat -654px -396px; position:absolute; left:0; top:-42px;}
.rightarm .left {width:42px; height:76px; background: url(storm.jpg) no-repeat -654px -436px; position:absolute; left:-42px; top:0;}
.rightarm .right {width:42px; height:76px; background: url(storm.jpg) no-repeat -694px -436px; position:absolute; left:42px; top:0;}
.rightarm .bottom {width:42px; height:42px; background: url(storm.jpg) no-repeat -654px -512px; position:absolute; left:0; top:76px;}
.rightarm .left .back {width:42px; height:76px; background: url(storm.jpg) no-repeat -732px -436px; position:absolute; left:-42px; top:0;}
.body {width:104px; height:104px; background: url(storm2.jpg) no-repeat -552px -38px; position:absolute; left:31px; top:115px;
transform:translateZ(-29px);
-webkit-transform:translateZ(-29px);
}
.body .left {width:104px; height:104px; background: url(storm2.jpg) no-repeat -448px -38px; position:absolute; left:-104px; top:0;}
.body .right {width:104px; height:104px; background: url(storm2.jpg) no-repeat -656px -38px; position:absolute; left:104px; top:0;}
.body .bottom {width:104px; height:104px; background: url(storm2.jpg) no-repeat -552px -143px; position:absolute; left:0; top:104px;}
.body .left .back {width:104px; height:104px; background: url(storm2.jpg) no-repeat -344px -38px; position:absolute; left:-104px; top:0;}
.footleft {width:39px; height:38px; background: url(storm3.jpg) no-repeat -307px -747px; position:absolute; left:44px; top:218px;
animation: stepleft 1.5s linear infinite;
-webkit-animation: stepleft 1.5s linear infinite;
transform:translateZ(-42px);
-webkit-transform:translateZ(-42px);
}
.footleft .left {width:78px; height:38px; background: url(storm3.jpg) no-repeat -231px -747px; position:absolute; left:-78px; top:0;}
.footleft .right {width:78px; height:38px; background: url(storm3.jpg) no-repeat -386px -747px; position:absolute; left:39px; top:0;}
.footleft .left .back {width:39px; height:38px; background: url(storm3.jpg) no-repeat -152px -747px; position:absolute; left:-39px; top:0;}
.footright {width:39px; height:38px; background: url(storm3.jpg) no-repeat -346px -747px; position:absolute; left:83px; top:218px;
animation: stepright 1.5s linear infinite;
-webkit-animation: stepright 1.5s linear infinite;
transform:translateZ(-42px);
-webkit-transform:translateZ(-42px);
}
.footright .left {width:78px; height:38px; background: url(storm3.jpg) no-repeat -231px -747px; position:absolute; left:-78px; top:0;}
.footright .right {width:78px; height:38px; background: url(storm3.jpg) no-repeat -386px -747px; position:absolute; left:39px; top:0;}
.footright .left .back {width:39px; height:38px; background: url(storm3.jpg) no-repeat -152px -747px; position:absolute; left:-39px; top:0;}
@keyframes spin {
0% {transform: rotateX(10deg) rotateY(0deg);}
100% {transform: rotateX(10deg) rotateY(-360deg);}
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotateX(10deg) rotateY(0deg);}
100% {-webkit-transform: rotateX(10deg) rotateY(-360deg);}
}
@keyframes swingleft {
0% {transform: translateZ(-60px) rotateX(45deg);}
50% {transform: translateZ(-60px) rotateX(-45deg);}
100% {transform: translateZ(-60px) rotateX(45deg);}
}
@-webkit-keyframes swingleft {
0% {-webkit-transform: translateZ(-60px) rotateX(45deg);}
50% {-webkit-transform: translateZ(-60px) rotateX(-45deg);}
100% {-webkit-transform: translateZ(-60px) rotateX(45deg);}
}
@keyframes swingright {
0% {transform: translateZ(-60px) rotateX(-45deg);}
50% {transform: translateZ(-60px) rotateX(45deg);}
100% {transform: translateZ(-60px) rotateX(-45deg);;}
}
@-webkit-keyframes swingright {
0% {-webkit-transform: translateZ(-60px) rotateX(-45deg);}
50% {-webkit-transform: translateZ(-60px) rotateX(45deg);}
100% {-webkit-transform: translateZ(-60px) rotateX(-45deg);}
}
@keyframes head {
0% {transform: rotateY(0deg);}
25% {transform: rotateY(-45deg);}
50% {transform: rotateY(0deg);}
75% {transform: rotateY(45deg);}
100% {transform: rotateY(0deg);}
}
@-webkit-keyframes head {
0% {-webkit-transform: rotateY(0deg);}
25% {-webkit-transform: rotateY(-45deg);}
50% {-webkit-transform: rotateY(0deg);}
75% {-webkit-transform: rotateY(45deg);}
100% {-webkit-transform: rotateY(0deg);}
}
@keyframes stepleft {
0% {top:218px;}
25% {top:218px;}
50% {top:200px;}
75% {top:218px;}
100% {top:218px;}
}
@-webkit-keyframes stepleft {
0% {top:218px;}
25% {top:218px;}
50% {top:200px;}
75% {top:218px;}
100% {top:218px;}
}
@keyframes stepright {
0% {top:200px;}
25% {top:218px;}
50% {top:218px;}
75% {top:218px;}
100% {top:200px;}
}
@-webkit-keyframes stepright {
0% {top:200px;}
25% {top:218px;}
50% {top:218px;}
75% {top:218px;}
100% {top:200px;}
}
@keyframes shake {
0% {left:0px;}
50% {left:0px;}
51% {left:-8px;}
52% {left:8px;}
53% {left:-8px;}
54% {left:8px;}
55% {left:-8px;}
56% {left:0px;}
100% {left:0px;}
}
@-webkit-keyframes shake {
0% {left:0px;}
50% {left:0px;}
51% {left:-8px;}
52% {left:8px;}
53% {left:-8px;}
54% {left:8px;}
55% {left:-8px;}
56% {left:0px;}
100% {left:0px;}
}
</style>
<br><br>
<div class ="holder">
    <div class ="frame">
	   <div class ="table">
		  <div class ="head">
			 <div class ="top"></div>
			 <div class ="left"><div class ="back"></div></div>
			 <div class ="right"></div>
			 <div class ="bottom"></div>
		  </div>
		  <div class ="leftarm">
			 <div class ="top"></div>
			 <div class ="left"><div class ="back"></div></div>
			 <div class ="right"></div>
			 <div class ="bottom"></div>
		  </div>
		  <div class ="rightarm">
			 <div class ="top"></div>
			 <div class ="left"><div class ="back"></div></div>
			 <div class ="right"></div>
			 <div class ="bottom"></div>
		  </div>
		  <div class ="body">
			 <div class ="left"><div class ="back"></div></div>
			 <div class ="right"></div>
			 <div class ="bottom"></div>
		  </div>
		  <div class ="footleft">
			 <div class ="left"><div class ="back"></div></div>
			 <div class ="right"></div>
		  </div>
		  <div class ="footright">
			 <div class ="left"><div class ="back"></div></div>
			 <div class ="right"></div>
		  </div>
	   </div>
    </div>
</div>