3D Circles Using CSS3 Only

Index:

<div id="circle"></div>

#circle
{
       border:1px solid #000;
       border-radius:50px;
       width:100px;
       height:100px;
       background:#8C8CFF;         
}
#circle:before, #cicle:after
{
   border:1px solid #000;
       border-radius:50px 50px 50px 50px;
       left:70px;
   content:"";
       position:fixed;
       top:30;
       width:100px;
       height:100px;
       background:#FF7DFF;
}
#circle:after
{
       border:1px solid #000;
       border-radius:50px;
       width:100px;
       height:100px;
       background:#093;
       left:30px;
       content:"";
       top:60px;
       position:fixed;
}