Switching div places using css transition or javascript

Question

Lets say I want to make a desktop gadget and place some shortcuts in it. I want to know does css transition work for windows sidebar gadgets and/or should I use some webkit prefix. I know this animation might be a little overambitious for a beginner like me, but I would like those boxes to smoothly switch places counter clockwise when I click on big box in the middle, like this picture http://oi61.tinypic.com/amp211.jpg

If this cannot be done using css transition, could you please point me to some javascript/jquery way to do it.

<div class="menu_cont">
  <div class="menu_def" id="menu_up3"></div>
  <div class="menu_def" id="menu_up2"></div>
  <div class="menu_def" id="menu_up1"></div>
  <div class="menu_def" id="menu_down3"></div>
  <div class="menu_def" id="menu_down2"></div>
  <div class="menu_def" id="menu_down1"></div>
  <div class="menu_def" id="menu_center"></div>
</div>

css

.menu_cont
{width:104px; height:312px; margin:10px 10px 0 0; position:relative;}

.menu_def
{position:absolute;
border:2px solid #000; border-radius:5px; box-shadow:5px 0 5px #000;}

#menu_up3
{width:40px; height:40px; top:0; right:0; background-color:#0C0;}

#menu_up2
{width:50px; height:50px; top:30px; right:10px; background-color:#066;}

#menu_up1
{width:60px; height:60px; top:70px; right:20px; background-color:#036;}

#menu_down3
{width:40px; height:40px; bottom:0; right:0; background-color:#9C3;}

#menu_down2
{width:50px; height:50px; bottom:30px; right:10px; background-color:#0FF;}

#menu_down1
{width:60px; height:60px; bottom:70px; right:20px; background-color:#09F;}

#menu_center
{width:70px; height:70px; top:119px; left:0; background-color:#03F;}

Answer 1

I think what you want is this:

• jquery animations

• css keyframes.

http://jsfiddle.net/6ta0ye3y/3/ jquery example:

 $("#menu_center").click(function() {
    $(this).delay(400).animate({
        top: "+=60px", 
        left: "+=20px", 
        height: "-=10px", 
        width: "-=10px"
    }); 

    $("#menu_down1").delay(300).animate(
        {top: "+=50px",
         left: "+=20px", 
         height: "-=10px", 
         width: "-=10px"
        });

    $("#menu_down2").delay(200).animate({
        top: "+=40px",
        left: "+=20px",
        height: "-=12px", 
        width: "-=12px"
    });

    $("#menu_down3").delay(100).animate({
        top: "-=200px", 
        left: "+=20px"
    });
});