Help needed to complete circular animated design

[vizz]

I'm trying to achieve this animation from last week. Please help me.

What I want to do,-

1. How to draw centered position circles with small cut at different angles

2. When clicked on logo display menus to bottom or right to circle

3. When clicked on menus how to animate,
   a. outer first circle anticlockwise
   b. outer second circle clockwise
   c. outer third circle anticlockwise
   d. outer fourth circle clockwise
   e. outer fifth circle anticlockwise

4. Then display clicked menu to the center right position of circles

5. Reduce size of circles and move them to left and show content related with clicked menu

My code

CSS

    .circle1 {
    background: #993333;
    width: 45em;
    height: 45em;
    -moz-border-radius: 25em;
    -webkit-border-radius: 25em;
    border-radius: 25em;
    border:2px solid #99FF33;
    }
    .circle2 {
    background: #00CCFF;
    width: 40em;
    height: 40em;
    -moz-border-radius: 25em;
    -webkit-border-radius: 25em;
    border-radius: 25em;
    padding:0px;
    margin:2.4em auto;
    border:2px solid #99FF33;
    }
    .circle3 {
    background: #0099CC;
    width: 35em;
    height: 35em;
    -moz-border-radius: 20em;
    -webkit-border-radius: 20em;
    border-radius: 20em;
    border:2px solid #99FF33;
    margin:2.4em auto;
    }
    .circle4 {
    background: #FF6666;
    width: 28em;
    height:28em;
    -moz-border-radius: 15em;
    -webkit-border-radius: 15em;
    border-radius:15em;
    margin:3.5em auto;
    border:2px solid #99FF33;
    }
    .circle5 {
    background: #006699;
    width: 20em;
    height: 20em;
    -moz-border-radius: 15em;
    -webkit-border-radius: 15em;
    border-radius: 15em;
    margin:3.8em auto;
    border:2px solid #99FF33;
    }

    .logo {
    background: #009966;
    width: 10em;
    height: 10em;
    -moz-border-radius: 5em;
    -webkit-border-radius: 5em;
    border-radius: 5em;
    margin:5em auto;
    border:2px solid #99FF33;
    }

    .logo  p{
     padding: 3.2em 3.8em 0 3.8em;
    }


    #navlist {
        width:40%;      
        margin-left:8em;
     }

    #navlist li{
        display: inline;
        list-style-type: none;
        padding-right: 20px;            
        }



    #navcontainer{ display:none;}
    #content{ display:none;}

HTML

<div id="container">

    <div class="circle1">    
        <div class="circle2">    
            <div class="circle3">            
                <div class="circle4">            
                    <div class="circle5">                        
                        <div class="logo"><p>Logo</p></div>             
                    </div>
                </div>
            </div>
        </div>   
    </div>



    <div id="navcontainer">
        <ul id="navlist">
            <li><a href="#">Item one</a></li>
            <li><a href="#">Item two</a></li>
            <li><a href="#">Item three</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
        </ul>
    </div>

    <div id="content">hi content to be displayed here</div>


</div>

Demo of above code
Demo of above code

Sources
CSS3 border-radius, transforms & animations
CSS 3 Transitions

[pritaeas]

Have a look at my jquery plugin here. I'm sure you can adapt it to your needs (if you want a jquery solution).

[singh1720]

@-webkit-keyframes rotateThis
{
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
}
.circle rotate

-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}

[vizz]

Thanks for reply, but still I have no solution for my problem
How to cut circle?
How to rotate using jquery?

[vizz]

Hey I found this useful but help is needed to complete.

This is what I want to create but little difference is there I want small crop portion and in this example large(1/4th) portion is croped.
I want to crop less than 1/4th portion.

see my images attached and help me to achieve that design.

[vizz]

I have added some css. How to animate that with jquery?

Before animate
After animate

How to add this menus around logo circle and then how to animate when clicked on menus ,

a. outer first circle anticlockwise
b. outer second circle clockwise
c. outer third circle anticlockwise
d. outer fourth circle clockwise
e. outer fifth circle anticlockwise

Please help me.
Waiting for solution.

[AleMonteiro]

Hi vizz,

this should help you: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

Regards.

[vizz]

CSS

#container{ margin:5% auto; margin-left:15% auto; border:1px solid #006666;}
.circle1 {
    background: #993333;
    width: 50em;
    height: 50em;
    position:relative;
    margin-left:15% ; 
    padding:15px;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;    
}
.circle1:after{
    width:75px;
    height:40px;
    bottom:0px;
    left:20em;
    background-color:#FFFFFF;
    content:"";
    position:absolute;   

}

.circle2 {
    background: #00CCFF;
    width: 42em;
    height: 42em;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    padding:15px;
    margin:3.2em auto;  
    position:relative;
}

.circle2:after{
    width:40px;
    height:74px;
    top:17.5em;
    left:0em;
    background-color:#FFFFFF;
     content:"";
    position:absolute;   

}

.circle3 {
    background: #0099CC;
    width: 34em;
    height:34em;
    -moz-border-radius:100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    margin:3.2em auto;
    position:relative;
    padding:15px;
}

.circle3:after{
    width:75px;
    height:60px;
    top:0;
    left:15.4em;
    background-color:#FFFFFF;
     content:"";
    position:absolute;   

}

.circle4 {
    background: #FF6666;
    width: 26em;
    height:26em;
    -moz-border-radius: 15em;
    -webkit-border-radius: 15em;
    border-radius:15em;
    margin:3em auto;
    position:relative;
    padding:15px;


}

.circle4:after{
    width:65px;
    height:60px;
    top:20em;
    left:3em;
    background-color:#FFFFFF;
    content:"";
    position:absolute;  

    -moz-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
    -webkit-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
    -o-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
    -ms-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
    transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);

}

.circle5 {
    background: #006699;
    width: 17em;
    height: 17em;   
    -moz-border-radius: 15em;
    -webkit-border-radius: 15em;
    border-radius: 15em;    
    margin:2em auto;
    position:relative;
    padding:40px;
}

.circle5:after{
    width:20px;
    height:20px;
    top:2em;
    left:15.3em;
    background-color:#FFFFFF;
     content:"";
    position:absolute;

-moz-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
-webkit-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
-o-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
-ms-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);

}

.logo {
    display:block;
    background: #009966;
    width: 15em;
    height: 15em;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius:100%;
    border-radius: 100%;
    margin:0.5em auto;  
    padding:15px;
    background:url(img/socials/Whack-Google-Earth-icon.png)#009966 no-repeat;

}

.logo  p{
         padding: 3.2em 3.8em 0 3.8em;
        }


#navlist {
            width:40%;      
            margin-left:8em;
         }

#navlist li{
            display: inline;
            list-style-type: none;
            padding-right: 20px;            
            }



#navcontainer{ display:none;}
#content{ display:none;}

.socials {
display:block;
width:62px;
height:60px;
background:url(img/socials/Orbitalblank.png) no-repeat;
cursor:pointer;
position:relative;
}

.socials{
margin:25% auto;
margin-top:8.3em;
}



ul.reset,
ul.reset li {
    display:block;
    list-style:none;
    padding:10px;
    margin:0 auto;
}

ul.reset li {
    position:absolute;
}


.hidden {
    visibility: hidden;
}

Javascript/jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>   

<script src="http://playground.mobily.pl/assets/demo/blocks/js/mobilyblocks.js" type="text/javascript"></script>
<script src="http://playground.mobily.pl/assets/demo/blocks/js/init.js" type="text/javascript"></script>

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript" >

$(document).ready(function() {

$("#nav").on('click', 'a', function() {       

    $('.circle1').transition({ rotate: '-95deg' }, 2000,
        function() {
            $('.circle2').transition({ rotate: '270deg' }, 2000,
                function() {

                $('.circle3').transition({ rotate: '-80deg' }, 2000,
                    function() {
                        $('.circle4').transition({ rotate: '120deg' }, 2000,
                            function() {
                                $('.circle5').transition({ rotate: '-180deg' }, 2000,
                                    function() {
                                        $('.logo').transition({ rotate: '-40deg' }, 2000);
                                    });                                    
                            });                        
                    });                
                }); 
        });          
  });  

});

</script>

HTML

<div id="container">

    <div class="circle1">    
        <div class="circle2">    
            <div class="circle3">            
                <div class="circle4">            
                    <div class="circle5">                        
                        <div class="logo">       

                            <div class="socials">
                                <ul class="reset" id="nav">
                                    <li><a href="#"><img src="img/socials/delicious.png" alt="" /></a></li>
                                    <li><a href="#"><img src="img/socials/digg.png" alt="" /></a></li>
                                    <li><a href="#"><img src="img/socials/google.png" alt="" /></a></li>
                                    <li><a href="#"><img src="img/socials/stumbleupon.png" alt="" /></a></li>
                                    <li><a href="#"><img src="img/socials/technorati.png" alt="" /></a></li>
                                    <li><a href="#"><img src="img/socials/twitter.png" alt="" /></a></li>
                                </ul>            
                            </div>   


                        </div>               
                    </div>
                </div>
            </div>
        </div>   
    </div>


    <div id="navcontainer">
        <ul id="navlist">
            <li><a href="#">Item one</a></li>
            <li><a href="#">Item two</a></li>
            <li><a href="#">Item three</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
        </ul>
    </div>

    <div id="content">hi</div>




</div>

This is what I have done, but circles are not smooth and they are not moving smoothly.
Please help me to complete this design.