使用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" 
    }); 
});