title: White space around css3 scale
body: <p>I have a small issue I want to fix, but can't find any good answer :</p>
  
  <p>When I use a scale on a div (which contains other divs), it leave white space around, from the "original" width and height of my div :</p>
  
  <p><img src="https://i.stack.imgur.com/chq4G.png" alt="enter image description here"> </p>
  
  <p>How can I remove the withe space around the div while scaled ?</p>
  
  <p>I can use js if needed !</p>
  
  <p>EDIT: Here is some code :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="pull-right nextpack"&gt;
  
                      &lt;div class="quarter scale-thumb"&gt;
  
                          &lt;div class="up"&gt;
                              &lt;div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack-&gt;src}})"&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="face"&gt;
                              &lt;div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack-&gt;src}})"&gt;&lt;/div&gt;
                              &lt;div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack-&gt;src}})"&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="cote-droit"&gt;
                              &lt;div class="inner"&gt;
                                  &lt;div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack-&gt;src}})"&gt;&lt;/div&gt;
                                  &lt;div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack-&gt;src}})"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>
  (you really don't need to know how the pack is done, it's a lot of css3 for nothing, basically just skew, rotate, scale to make a 3D render from a flat template)</p>
  
  <pre><code>.quarter.scale-thumb
  {
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
  }
  </code></pre>
  
  <p>PS : The first pic is when I don't add the scale-thumb class</p>