<style>
.holder {width:750px; height:800px; background:#ddd; margin:20px auto; overflow:hidden;
}
.frame {position:relative; width:165px; height:400px; margin:80px auto;
perspective:1200px;
perspective-origin: 50% 50%;
-webkit-perspective: 1200px;
-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 {
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 {
backface-visibility:hidden;
transform-origin:left top;
transform:rotateY(90deg);
-webkit-transform-origin:left top;
-webkit-transform:rotateY(90deg);
}
.table div div.bottom {
backface-visibility:hidden;
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:306px; height:367px; background: url(face.png); 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:306px; height:306px; background: url(headtop.jpg); position:absolute; left:0; top:-122px;}
.head .left {width:399px; height:214px; background: url(faceleft.png); position:absolute; left:-399px; top:153px;}
.head .right {width:306px; height:214px; background: url(faceright.jpg); position:absolute; left:306px; top:153px;}
.head .bottom {width:306px; height:306px; background: url(headbottom.jpg); position:absolute; left:0; top:367px;}
.head .left .back {width:306px; height:215px; background: url(faceback.jpg); position:absolute; left:-213px; top:0;}
.leftarm {width:76px; height:142px; background: url(armside.png); position:absolute; left:-21px; top:400px;
transform-origin:left 38px -38px;
-webkit-transform-origin:left 38px -38px;
animation: swingleft 1.5s linear infinite;
-webkit-animation: swingleft 1.5s linear infinite;
}
.leftarm .top {width:76px; height:76px; background: url(armtop.png); position:absolute; left:0; top:-76px;}
.leftarm .left {width:76px; height:142px; background: url(armside.png); position:absolute; left:-76px; top:0;}
.leftarm .right {width:76px; height:142px; background: url(armside.png); position:absolute; left:76px; top:0;}
.leftarm .bottom {width:76px; height:76px; background: url(handleft.png); position:absolute; left:0; top:142px;}
.leftarm .left .back {width:76px; height:142px; background: url(armside.png); position:absolute; left:-76px; top:0;}

.rightarm {width:76px; height:142px; background: url(armside.png); position:absolute; left:252px; top:400px;
transform-origin:left 38px -38px;
-webkit-transform-origin:left 38px -38px;
animation: swingright 1.5s linear infinite;
-webkit-animation: swingright 1.5s linear infinite;
}
.rightarm .top {width:76px; height:76px; background: url(armtop.png); position:absolute; left:0; top:-76px;}
.rightarm .left {width:76px; height:142px; background: url(armside.png); position:absolute; left:-76px; top:0;}
.rightarm .right {width:76px; height:142px; background: url(armside.png); position:absolute; left:76px; top:0;}
.rightarm .bottom {width:76px; height:76px; background: url(handright.png); position:absolute; left:0; top:142px;}
.rightarm .left .back {width:76px; height:142px; background: url(armside.png); position:absolute; left:-76px; top:0;}
.body {width:196px; height:196px; background: url(bodyfront.png); position:absolute; left:55px; top:367px;
transform:translateZ(-49px);
-webkit-transform:translateZ(-49px);
}
.body .left {width:196px; height:196px; background: url(bodysides.png); position:absolute; left:-196px; top:0;}
.body .right {width:196px; height:196px; background: url(bodysides.png); position:absolute; left:196px; top:0;}
.body .bottom {width:196px; height:196px; background: url(bodybottom.jpg); position:absolute; left:0; top:196px;}
.body .left .back {width:196px; height:196px; background: url(bodysides.png); position:absolute; left:-196px; top:0;}

.footleft {width:73px; height:74px; background: url(legsfront.png); position:absolute; left:80px; top:563px;
animation: stepleft 1.5s linear infinite;
-webkit-animation: stepleft 1.5s linear infinite;
transform:translateZ(-74px);
-webkit-transform:translateZ(-74px);
}
.footleft .left {width:146px; height:74px; background: url(legssides.png); position:absolute; left:-146px; top:0;}
.footleft .right {width:146px; height:74px; background: url(legssides.png); position:absolute; left:73px; top:0;}
.footleft .left .back {width:73px; height:74px; background: url(legsback.png); position:absolute; left:-73px; top:0;}
.footright {width:73px; height:74px; background: url(legsfront.png); position:absolute; left:153px; top:563px;
animation: stepright 1.5s linear infinite;
-webkit-animation: stepright 1.5s linear infinite;
transform:translateZ(-24px);
-webkit-transform:translateZ(-24px);
}
.footright .left {width:146px; height:74px; background: url(legssides.png); position:absolute; left:-146px; top:0;}
.footright .right {width:146px; height:74px; background: url(legssides.png); position:absolute; left:73px; top:0;}
.footright .left .back {width:73px; height:74px; background: url(legsback.png); position:absolute; left:-73px; top:0;}
@keyframes spin {
0% {transform: rotateX(15deg) rotateY(0deg);}
100% {transform: rotateX(15deg) rotateY(-360deg);}
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotateX(15deg) rotateY(0deg);}
100% {-webkit-transform: rotateX(15deg) rotateY(-360deg);}
}
@keyframes swingleft {
0% {transform: translateZ(-104px) rotateX(-45deg);}
50% {transform: translateZ(-104px) rotateX(45deg);}
100% {transform: translateZ(-104px) rotateX(-45deg);}
}
@-webkit-keyframes swingleft {
0% {-webkit-transform: translateZ(-104px) rotateX(-45deg);}
50% {-webkit-transform: translateZ(-104px) rotateX(45deg);}
100% {-webkit-transform: translateZ(-104px) rotateX(-45deg);}
}
@keyframes swingright {
0% {transform: translateZ(-104px) rotateX(45deg);}
50% {transform: translateZ(-104px) rotateX(-45deg);}
100% {transform: translateZ(-104px) rotateX(45deg);;}
}
@-webkit-keyframes swingright {
0% {-webkit-transform: translateZ(-104px) rotateX(45deg);}
50% {-webkit-transform: translateZ(-104px) rotateX(-45deg);}
100% {-webkit-transform: translateZ(-104px) rotateX(45deg);}
}
@keyframes head {
0% {transform: rotateY(0deg);}
25% {transform: rotateY(-30deg);}
50% {transform: rotateY(0deg);}
75% {transform: rotateY(30deg);}
100% {transform: rotateY(0deg);}
}
@-webkit-keyframes head {
0% {-webkit-transform: rotateY(0deg);}
25% {-webkit-transform: rotateY(-30deg);}
50% {-webkit-transform: rotateY(0deg);}
75% {-webkit-transform: rotateY(30deg);}
100% {-webkit-transform: rotateY(0deg);}
}
@keyframes stepleft {
0% {top:563px; transform:translateZ(-60px)}
25% {top:563px; transform:translateZ(-88px)}
50% {top:530px; transform:translateZ(-88px)}
75% {top:563px; transform:translateZ(-60px)}
100% {top:563px; transform:translateZ(-60px)}
}
@-webkit-keyframes stepleft {
0% {top:563px; -webkit-transform:translateZ(-60px)}
25% {top:563px; -webkit-transform:translateZ(-88px)}
50% {top:530px; -webkit-transform:translateZ(-88px)}
75% {top:563px; -webkit-transform:translateZ(-60px)}
100% {top:563px; -webkit-transform:translateZ(-60px)}
}
@keyframes stepright {
0% {top:530px; transform:translateZ(-88px)}
25% {top:563px; transform:translateZ(-60px)}
50% {top:563px; transform:translateZ(-60px)}
75% {top:563px; transform:translateZ(-88px)}
100% {top:530px; transform:translateZ(-88px)}
}
@-webkit-keyframes stepright {
0% {top:530px; -webkit-transform:translateZ(-88px)}
25% {top:563px; -webkit-transform:translateZ(-60px)}
50% {top:563px; -webkit-transform:translateZ(-60px)}
75% {top:563px; -webkit-transform:translateZ(-88px)}
100% {top:530px; -webkit-transform:translateZ(-88px)}
}
/*
@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>