Jak wypełnić lukę podczas skali

Question

Jak zapełnić lukę na dole podczas korzystania -webkit-transform:

Istnieje luka gdy div staje mała. nie każdy organ wie jak rozwiązać te luki

Oto kod

<div id="popUp"> 
    <div id="trans"> 
     <h1>hover me</h1> 
    </div> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p> 
</div> 

CSS

#popUp{ 
    height: auto; 
    width:400px; 
    background: #EEE;  
} 
#trans{ 
    width:100%; 
    height:200px; 
    background: yellow; 

    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 

    -webkit-transform-origin: left top 0; 
     -moz-transform-origin: left top 0; 
     -o-transform-origin: left top 0; 
     -ms-transform-origin: left top 0; 
      transform-origin: left top 0; 
} 
#trans:hover{ 
    -moz-transform: scale(.5); 
    -ms-transform: scale(.5); 
    -o-transform: scale(.5); 
    -webkit-transform: scale(.5); 
    transform: scale(.5) 
} 
h1{ 
    text-align: center; 
} 

DEMO http://jsfiddle.net/sweetmaanu/XpJEQ/3/

nie udało się odnaleźć właściwe rozwiązanie :(

Proszę mi pomóc, jeśli znasz rozwiązanie. Dzięki z góry (Y)

Answer 1

Mam nieco zmodyfikowany początkowej kod w następujący sposób (nie ma szczeliny między tekstem i żółtym prostokątem na przekształcać):

#popUp{ 
    height: 300px; 
    width:400px; 
    background: #EEE; 

    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 

    -webkit-transform-origin: left top 0; 
    -moz-transform-origin: left top 0; 
    -o-transform-origin: left top 0; 
    -ms-transform-origin: left top 0; 
     transform-origin: left top 0; 
} 
#popUp:hover{ 
    -moz-transform: scale(.5); 
    -ms-transform: scale(.5); 
    -o-transform: scale(.5); 
    -webkit-transform: scale(.5); 
    transform: scale(.5) 
} 
#trans{ 
    width:100%; 
    height:200px; 
    background: yellow; 
} 

h1{ 
    text-align: center; 
} 

Pasuje początkowe wymagania wyeliminowanie tej luki . Jeśli występują dodatkowe wymagania, kod można odpowiednio zmodyfikować.

Answer 2

CSS3 transformscale2d nie spowoduje repozycjonowania elementów wokół niego. Jeśli chcesz, aby tekst się poruszał, musisz zmienić rzeczywisty element height i width.

Answer 3

Jedyne rozwiązanie, jakie mogę sobie wyobrazić, to usunięcie elementu z przepływu DOM (ustaw jego element macierzysty na position: relative, a następnie położenie elementu) i animacja padding-top kolejnego elementu. (Prefiksy minus producenta) http://jsfiddle.net/XpJEQ/7/

CSS::

Demo

#popUp { 
    background: #EEE; 
    position: relative; 
    width: 400px; 
    max-height: 300px; 
} 
#trans { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 200px; 
    background: yellow; 
    transition: all 0.5s; 
    transform-origin: left top 0; 
} 
#trans:hover { transform: scale(.5); } 
#trans + * { 
    padding-top: 210px; 
    transition: all 0.5s; 
} 
#trans:hover + * { padding-top: 110px; } 
h1 { text-align: center; } 

HTML:

<div id="popUp"> 
    <div id="trans"> 
     <h1>hover me</h1> 
    </div> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p> 
</div>