<style type="text/css">
.holder {width:400px; height:400px; background:#fff; margin:20px auto; border-radius:50%; position:relative;
background-image: -webkit-radial-gradient(center center, circle farthest-corner, rgba(0,0,0,0.8), 
rgba(255,255,255,1) 60%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at center center, rgba(0,0,0,0.8), rgba(255,255,255,1) 60%);
}
.frame {position:relative; width:200px; height:200px; left:100px; top:100px;
perspective:1200px;
perspective-origin: 50% 50%;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
}
.table {width:200px; height:200px; position:relative; margin:0 auto;
transform-origin:50% 50% -100px; 
-webkit-transform-origin:50% 50% -100px; 
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: spin 10s linear infinite;
-webkit-animation: spin 10s linear infinite;
}
.shadow {width:200px; height:200px; background:transparent; border-radius:50% 50%; position:absolute; left:130px; top:190px;
background-image: -webkit-radial-gradient(center center, circle farthest-corner, rgba(0,0,0,0.5), rgba(0,0,0,0) 50%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at center center, rgba(0,0,0,0.5), rgba(0,0,0,0) 50%);
transform:rotateX(70deg);
-webkit-transform:rotateX(70deg);
}
.table div {
position:absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.eye {display:block; width:200px; height:200px; background:#fff; border-radius:100px; position:absolute; left:100px; top:100px;}
.eyeball {display:block; width:200px; height:200px; background:transparent; border-radius:200px; position:absolute; left:100px; top:100px;
background-image: -webkit-radial-gradient(80px 80px, circle farthest-corner, rgba(255,255,255,1), rgba(255,255,255,0.1) 30%, rgba(0,0,0,0.4) 80%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at 80px 60px, rgba(255,255,255,1), rgba(255,255,255,0.1) 30%, rgba(0,0,0,0.4) 80%);
}
.pupil {width:40px; height:40px; background:#000; border-radius:40px; left:80px; top:80px; 
transform:translateZ(5px);
-webkit-transform:translateZ(5px);
}
.pupil:before {display:block; content:""; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.3); position:absolute;
transform:translateZ(5px);
-webkit-transform:translateZ(5px);
animation: shine 10s linear infinite;
-webkit-animation: shine 10s linear infinite;
}
.iris {width:90px; height:90px; background:#3a6; border-radius:90px; left:55px; top:55px;
background-image: -webkit-radial-gradient(center center, circle farthest-corner, rgba(255,255,255,1), 
rgba(255,255,255,0) 80%); /* for Safari */
background-image: radial-gradient(circle farthest-corner at center center, rgba(255,255,255,1), rgba(255,255,255,0) 80%);
}
@keyframes spin {
0% {transform:rotateY(0deg);}
10% {transform:rotateY(0deg);}
20% {transform:rotateY(50deg);}
30% {transform:rotateY(50deg);}
40% {transform:rotateX(-50deg);}
50% {transform:rotateX(-50deg);}
60% {transform:rotateX(50deg);}
70% {transform:rotateX(50deg);}
80% {transform:rotateY(-50deg);}
90% {transform:rotateY(-50deg);}
100% {transform:rotateY(0deg);}
}
@keyframes shine {
0% {left:0; top:-10px;}
10% {left:0; top:-10px;}
20% {left:-20px; top:-10px;}
30% {left:-20px; top:-10px;}
40% {left:0; top:-20px; background:rgba(255,255,255,0.1);}
50% {left:0; top:-20px; background:rgba(255,255,255,0.1);}
60% {left:0; top:0px; background:rgba(255,255,255,0.7);}
70% {left:0; top:0px; background:rgba(255,255,255,0.7);}
80% {left:20px; top:-10px;}
90% {left:20px; top:-10px;}
100% {left:0; top:-10px;}
}
@-webkit-keyframes spin {
0% {-webkit-transform:rotateY(0deg);}
10% {-webkit-transform:rotateY(0deg);}
20% {-webkit-transform:rotateY(50deg);}
30% {-webkit-transform:rotateY(50deg);}
40% {-webkit-transform:rotateX(-50deg);}
50% {-webkit-transform:rotateX(-50deg);}
60% {-webkit-transform:rotateX(50deg);}
70% {-webkit-transform:rotateX(50deg);}
80% {-webkit-transform:rotateY(-50deg);}
90% {-webkit-transform:rotateY(-50deg);}
100% {-webkit-transform:rotateY(0deg);}
}
@-webkit-keyframes shine {
0% {left:0; top:-10px;}
10% {left:0; top:-10px;}
20% {left:-20px; top:-10px;}
30% {left:-20px; top:-10px;}
40% {left:0; top:-20px; background:rgba(255,255,255,0.1);}
50% {left:0; top:-20px; background:rgba(255,255,255,0.1);}
60% {left:0; top:0px; background:rgba(255,255,255,0.5);}
70% {left:0; top:0px; background:rgba(255,255,255,0.5);}
80% {left:20px; top:-10px;}
90% {left:20px; top:-10px;}
100% {left:0; top:-10px;}
}
</style>
<br><br>
<div class ="holder">
    <div class ="shadow"></div>
    <div></div>
    <div class ="frame">
	   <div class ="table">
		  <div class ="iris"></div>
		  <div class ="pupil"></div>
	   </div>
    </div>
    <span class ="eyeball"></span>
</div>