css3周围的空白空间

我有一个小问题，我想解决，但找不到任何好的答案：

当我在div（包含其他div）上使用缩放时，会从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：第一张照片是我不添加缩放拇指类的时候

Answer 1

解决scheme是将元素包装在容器中，并在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 */ } 

Answer 2

transform工作原理是：

1. 你的元素被渲染
2. 你的元素被转换（移动，旋转，缩放）
3. 其他元素留在他们得到渲染 – 围绕“原始元素”

所以白色空间实际上就是元素渲染的方式。

如果要以不同的方式呈现元素的大小并使其周围的元素响应，则应该在CSS中使用width和height 。

或者你可以使用像JavaScript的东西来resize的东西。

Answer 3

我以这种方式解决了这个问题（我使用SASS，但不是强制性的）：

 $originalWidth: 100px; $rate: 0.5; parent { width: $originalWidth; } parent > div { transform: scale(1); } parent:hover { width: $originalWidth*$rate; } parent:hover > div { transform: translateX(($originalSize * ($rate - 1))/2) scale($rate); /* the order matters*/ } 

Answer 4

我解决了这个问题，通过在应用scale的元素上添加一个' outline：1px solid transparent '。

 #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; outline: 1px solid transparent; }