title: CSS3 float position after scale transform
body: <p>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.  </p>
  
  <p>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.  </p>
  
  <pre><code>&lt;div id="level1"&gt;
      &lt;div class="inside"&gt;&lt;/div&gt;
      &lt;div class="inside"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .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;
  }
  </code></pre>
  
  <p>Here is an example: </p>
  
  <p><a href="https://jsfiddle.net/1f88kff3/1/" rel="nofollow">https://jsfiddle.net/1f88kff3/1/</a></p>
  
  <p>Does anyone know how to fix this problem?</p>