White space around css3 scale

Question

I have a small issue I want to fix, but can't find any good answer :

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 :

How can I remove the withe space around the div while scaled ?

I can use js if needed !

EDIT: Here is some code :

HTML

<div class="pull-right nextpack">                      <div class="quarter scale-thumb">                          <div class="up">                             <div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>                         </div>                          <div class="face">                             <div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>                             <div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>                         </div>                          <div class="cote-droit">                             <div class="inner">                                 <div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>                                 <div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>                             </div>                         </div>                      </div>                   </div> 

CSS (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)

.quarter.scale-thumb { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); } 

PS : The first pic is when I don't add the scale-thumb class

Answer 1

how transform works is:

1. your element gets rendered
2. your element gets transformed (moved, rotated, scaled)
3. other elements stay where they got rendered - around the "original element"

so the white space is really just the way the element was rendered in the first place.

You should use width and height in CSS if you want to render the size of elements differently and have the surrounding elements respond to it.

Or you could use something like javascript to resize things.