CSS3缩放变换后的浮动定位

Question

我正在开展一个项目，需要对多个div进行缩放，并使它们全部浮动到左侧且之间没有空隙。

当缩放比例为1时，一切都运行良好。但是当我增加或减少缩放比例时，被变换的div仍然占用与未变换的div相同的空间。

<div id="level1">
    <div class="inside"></div>
    <div class="inside"></div>
</div>

.inside {
     box-sizing: border-box;
    float:left;
    display:inline-block;
    width:100px;
    height:100px;
    border:2px solid red;
    transform:scale(.6);
    transform-origin:top left;
}

以下是一个例子：

https://jsfiddle.net/1f88kff3/1/

有人知道如何解决这个问题吗？

- user1763510

---

缩放并不意味着元素的实际宽度被改变。它仍然保持不变，像素也保持不变。 - Ali Bassam

Answer 1

从CSS3规范(http://www.w3.org/TR/css3-transforms/#module-interactions)中可以看到，transform不会影响元素的底层位置："该模块定义了一组CSS属性，它们影响那些应用这些属性的元素的视觉呈现；这些效果是在根据[CSS21]的视觉格式化模型对元素进行大小和位置调整之后应用的。"

为了实现您想要的效果，您需要在转换之前更改对象的属性。您可以通过应用负边距来实现这个目标。对于您特定的示例，以下代码可以达成效果：https://jsfiddle.net/1f88kff3/5/。

.inside {
  box-sizing: border-box;
  float:left;
  display:inline-block;
  width:100px;
  height:100px;
  margin-right: -40px;
  border:2px solid red;
  position:relative;
}

希望这个技巧能够在最终的网站或代码中起到帮助作用。

- Hans

Answer 2

我遇到了同样的问题，但使用负边距并没有得到期望的结果。所以我使用了另一个技巧：

我将内容包装在一个 div 中，设置了它的宽度和高度，然后浮动，只缩放其中的内容，并绝对定位于包装器的左上角。

<style>
#container {
  border-bottom: 1px solid #666;
  padding: 4px;
}

.wrapper {
  position: relative;
  float: left;
  margin: 10px;
  background-color: #666;
  overflow: hidden;
  width: 120px;
  height: 120px;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 40px;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5);
  width: 200px;
  height: 200px;
  background-color: #aaa;
}
</style>

<div id="container">
  Scale: <input type="number" value="50" id="scale"> %
</div>
<div class="wrapper">
  <div class="content">
    Content 1
  </div>
</div>

<div class="wrapper">
  <div class="content">
    Content 2
  </div>
</div>

<div class="wrapper">
  <div class="content">
    Content 3
  </div>
</div>

<div class="wrapper">
  <div class="content">
    Content 4
  </div>
</div>

<script>
$(document).ready(function(){
    $('#scale').on('input propertychange', function() {
    var scl = $('#scale').val() / 100;
    var new_w = 200 * scl; //200 = original size
    new_w += 20; //For visula purpose only

    $('.content').css({
        'transform' : 'scale('+scl+','+scl+')'
     });
    $('.wrapper').css({
        'width' : new_w+'px', 
      'height' : new_w+'px'
     })
  });
})
</script>

在这个Fiddle中看它的实际效果。

- Fenistil

Answer 3

<div class="parent" >
<div class="some" style="transform:scale(0)">some content</div>
<div class="some" >some content</div>
<div class="some" >some content</div>
<div class="some" >some content</div>
</div>

.some{
    width:100px;height:100px;
    border:1px solid red;
    margin:10px;

    float: left;
}



.parent{
height:55px;
overflow:hidden;
border:3px solid green;
}

- zloctb