CSS3 float position after scale transform

Question

I am working on a project where I need to scale several divs and want them to all float left with no space in between.

It works fine when the scale is set to 1, but when I increase or decrease the scale then then transformed divs still take up the same amount as the untransformed divs.

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

Here is an example:

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

Does anyone know how to fix this problem?

Answer 1

From the CSS3 spec ( http://www.w3.org/TR/css3-transforms/#module-interactions ), we see that transform doesn't affect the elements underlying position: "This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]."

In order to achieve the effect you desire, you will have to change the properties of the object prior to its transform. One way you can achieve this is by applying a negative margin. For your specific example, the following works: 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;
}

Hopefully this technique can help when applied to your final site or code.

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

I've run into the same problem, but by the use of negative margin I didn't get the excepted results. So I used an another trick:

I wrapped the content into a div, which's width and height has been set, floated, then I scaled only the content in it, positioned absolute top left of the wrapper.

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

See it in action in this Fiddle .