使用Jquery或CSS3让人产生一种错觉，以为一个div是从另一个div发展而来的

我正在做一个项目，那里有一幅地图的插图。图中有一个横截面，你可以看到它下面的地球。我想在页面加载时使地图看起来是二维的，然后向上滑动以显示三维横截面。因此，我所做的是将地图放在一个图层（png）下面，该图层将地图的负形状切掉。我正在使用jQuery向下滑动该层。但我的问题在于z索引和动画之后地图的部分被覆盖。有人能建议我如何达到这个效果吗

这是到目前为止的工作页面

CSS

HTML

---

试图理解需求。你所说的“动画之后地图的各个部分被覆盖”是什么意思？谢谢。对不起，我的意思是…如果你在动画期间和之后环顾四周，你可以看到部分白色png重叠在地图上。我想一定有别的方法可以做到这一点？好的。现在可能有更清楚的解释了。在动画的第一个视图中，实际上没有“看到”它，因为它的持续时间似乎很快发生。一种选择可能是在单个DOM元素上使用

psuedo

元素，而不是

img

。然后使用

psuedo

元素的

background

属性渲染“3d”效果。如果理解准确，现在的要求是图像周围不显示“白色”部分或“重叠”？确定。尝试完全不使用

#mapBack

。删除了

控制台上的节点

，显示时图像的任何部分都没有“重叠”。如果不使用backMap，则问题在于贴图始终显示为3D。我希望它第一次显示为2d，这样就看不到横截面。然后…让它看起来好像是从页面中升起的。你知道我的意思吗？

#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;

}

<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 -->

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