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

2013-06-19 06:14:19 586 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

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