我有一个小问题,我想修复,但找不到任何好的答案:
当我在一个div(包含其他div)使用一个scale,它留下的空白周围,从“原始”的宽度和我的div的高度:
如何在缩放时删除div周围的空间?
我可以使用js如果需要!
编辑:这里是一些代码:
HTML
<div class="pull-right nextpack"> <div class="quarter scale-thumb"> <div class="up"> <div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div> </div> <div class="face"> <div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div> <div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div> </div> <div class="cote-droit"> <div class="inner"> <div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div> <div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div> </div> </div> </div> </div>
CSS
(你真的不需要知道包是如何做的,它是一个很大的css3为无,基本上只是倾斜,旋转,缩放以从平面模板制作3D渲染)
.quarter.scale-thumb { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); }
PS:第一个pic是当我不添加scale-thumb类
解决方法
解决方案是将元素包装在容器中,并在调整scale()时调整它的大小
Jsfiddle演示:http://jsfiddle.net/2KxSJ/
相关代码是:
#wrap { background:yellow; height:66px; width:55px; padding:10px; float:left; -webkit-transition:0.5s all; -moz-transition:0.5s all; /* more transition here */ } #wrap:hover { height:300px; width:260px; } .quarter { padding:20px; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); background:red; width:250px; -webkit-transform-origin:left top; -webkit-transition:0.5s all; -moz-transition:0.5s all; /* more transition here */ } #wrap:hover .quarter { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin:left top; -moz-transform-origin:left top; /* more transform-origin */ }