使用css转换或javascript切换div位置

Question

假设我想制作桌面小工具并在其中放置一些快捷方式。我想知道Windows边栏小工具的css过渡工作和/或我应该使用一些webkit前缀。 我知道这个动画可能是像我这样的初学者有点过于雄心勃勃，但我想那些平滑切换的地方逆时针时，我在中间点击大箱子，喜欢这幅画 http://oi61.tinypic.com/amp211.jpg

如果不能箱用css过渡来完成，你能否指点我一些javascript/jquery的方式来做到这一点。

<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

我想你想要的是这样的：

• jquery animations

• css keyframes。

http://jsfiddle.net/6ta0ye3y/3/ jQuery的例子：

$("#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" 
    }); 
});