White space around css3 scale

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.

solution is to wrap the element inside a container, and resize it too while the scale() is done

Jsfiddle demo: http://jsfiddle.net/2KxSJ/

relevant code is:

#wrap
{
    background:yellow;
    height:66px;
    width:55px;
    padding:10px;
    float:left;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}

#wrap:hover
{
    height:300px;
    width:260px;
}

.quarter
{
    padding:20px;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    background:red;
    width:250px;
    -webkit-transform-origin:left top;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}


#wrap:hover .quarter
{
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    /* more transform-origin */
}