使用CSS3 对元素进行缩放后，溢出父元素部分看不见了怎么办？

[kinghome]

使用CSS3 的 transform: scale(3) rotate(0deg) ;对元素进行缩放
使用CSS3 对元素进行缩放后，溢出父元素部分怎么也看不见，怎么办？

#wallpaper-renderer{
        width:320px; 
        height:460px;
        overflow:auto;
        position: relative;
}
#viewport{ 	
        position:absolute; 
	top:0; 
	left:0; 
	bottom:0; 
	right:0; 
        background:url(../images/ChinaMap.png) no-repeat center center; 
        background-size:cover;
}
.zoom{
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	
	-moz-transform: scale(3) rotate(0deg);
	-webkit-transform: scale(3) rotate(0deg) ;
	-o-transform: scale(3) rotate(0deg);
	-ms-transform: scale(3) rotate(0deg) ;
	transform: scale(3) rotate(0deg) ;
}
.rezoom{
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	
	-moz-transform: scale(1) rotate(0deg);
	-webkit-transform: scale(1) rotate(0deg) ;
	-o-transform: scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg) ;
	transform: scale(1) rotate(0deg) ;
}

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    $("a").on("click",function(e){
              var ind = $(e.currentTarget).index()
              switch(ind){
                   case 0:
                        $("#viewport").addClass("zoom").removeClass("rezoom");
                   break;
                   case 1:
                       $("#viewport").addClass("rezoom").removeClass("zoom");
                   break;
              }
    });
})    
</script>
           <a href="#">放大预览</a>
           <a href="#">还原尺寸</a>
            <div id="wallpaper-renderer">
                <div data-role=view   id="viewport">
                	<label>ABCDE FGHIJK</label> 
                </div>
            </div>

[kinghome]

问题发布一周后，尚未有回应 。 ----------------- 2013-6-27 14：57