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/

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

Answer 1

从CSS3规范（http://www.w3.org/TR/css3-transforms/#module-interactions），我们看到转换不会影响基础位置的元素：“此模块定义了一组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;
}

希望这种技术在应用于您的最终网站或代码时能够提供帮助。

Answer 2

<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;
}

Answer 3

我遇到了同样的问题，但是由于使用了负余量，我没有得到例外结果。所以我使用了另一个技巧：

我将内容包装成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中查看此操作。

缩放变换后的CSS3浮点位置

3 个答案: