Biała przestrzeń wokół skali CSS3

Question

Mam mały problem chcę naprawić, ale nie może znaleźć żadnej dobrej odpowiedzi:

Kiedy użyć skali na div (który zawiera inne DIV), pozostawić spacje dookoła, z „oryginalnego” szerokości i wysokości mojego div:

Jak mogę usunąć przestrzeń witka wokół div podczas skalowane?

Mogę użyć js w razie potrzeby!

EDIT: Oto kod:

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 (naprawdę nie trzeba wiedzieć, jak opakowanie jest zrobione, to dużo CSS3 dla nic, właściwie tylko pochylanie, obracanie, skalowanie, aby renderować 3D z płaskiego szablonu)

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

PS: Pierwszy pic jest to, kiedy nie dodać klasę skala kciuka

Answer 1

rozwiązanie jest owinięcie elementu wewnątrz pojemnika i rozmiaru zbyt zaś skala() odbywa

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

odpowiedni kod wynosi:

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

Answer 2

jak transform prace to:

1. Twój element zostanie wygenerowana
2. Twój element zostanie przekształcony (przesuwać, obracać, skalować)
3. inne elementy pozostać tam, gdzie dostali renderowane - wokół „oryginalnego elementu”

tak biała przestrzeń jest naprawdę droga element został wydany f irst miejsce.

Powinieneś użyć width i height w CSS, jeśli chcesz renderować rozmiar elementów w różny sposób i odpowiadać na otaczające elementy.

Albo możesz użyć czegoś w stylu javascript do zmiany rozmiaru.

Answer 3

I rozwiązać to przez dodanie konturu ": 1px bryła przezroczysta" do elementu, w którym stosowana jest skala.

#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; 

    outline: 1px solid transparent; 
} 

Answer 4

Rozwiązałem to w ten sposób (użyłem Sass ale nie jest to obowiązkowe):

$originalWidth: 100px; 
$rate: 0.5; 

parent { 
    width: $originalWidth; 
} 

parent > div { 
    transform: scale(1); 
} 

parent:hover { 
    width: $originalWidth*$rate; 
} 

parent:hover > div { 
    transform: translateX(($originalSize * ($rate - 1))/2) scale($rate); /* the order matters*/ 
}