使用Jquery或CSS3来表示div正在从另一个div中生长出来

Question

我正在开展一个项目，其中有一张地图的插图。它以横截面图示，因此您可以看到它下面的地球。我想这样做，当页面加载地图时看起来是2D，然后向上滑动以显示横截面3D。所以，我所做的是将地图放在一个图层（png）下面，该图层的地形为负面形状。我使用jQuery将该图层向下滑动。但我的问题在于他的z-index和地图的各个部分在动画之后被覆盖。任何人都可以建议我如何实现这种效果？

到目前为止，这是一个工作页面http://www.gregtaylordesignstudio.com/Great-Lakes-Project/great_lakes_working.html

CSS

#topSection {
    width:900px;
    height:749px;
    position:relative;
    margin: 0 auto;

}
#base {
    width:900px;
    height:749px;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    }


#topOverlay{
    width:900px;
    height:749px;
    position:absolute;
    top:0;
    left:0;
    z-index:3;
    display:none;
    }

#mapBack {
    width:900px;
    height:749px;
    position:absolute;
    top:0;
    left:0;
    z-index:2;

}

HTML

<div id="maincontentcontainer">
<div id="maincontent">
  <div id="topSection">
  <div id="base"><img src="images/MAP-backgr.png" width="990" height="749" alt="base_map" /></div>
  <div id="mapBack"><img src="images/MAP-surround.png" width="990" height="749" alt="mapSurround" /></div>
  <div id="topOverlay"><img src="images/MAP-backgr-top.png" width="990" height="749" alt="mapOverlay" /></div>

</div>

</div>    
</div><!-- End maincontentcontainer -->

和jQuery

$(document).ready(function() {
              $('#mapBack').delay(3000).animate({top:"55px"},600);
        });