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
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 */
}