Come per colmare il divario, mentre scala

Question

Come si può colmare il vuoto in fondo durante l'utilizzo di -webkit-transform:

C'è un gap quando div diventando piccolo. qualsiasi organismo non sa come risolvere questi gap

ecco il codice

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

Impossibile trovare una soluzione adeguata :(

Per favore aiutatemi se conoscete la soluzione. Grazie in anticipo (Y)

Answer 1

ho un po 'modificato il codice iniziale come segue (non c'è divario tra il testo e il rettangolo giallo su trasformare):

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

Si adatta ai requisiti iniziali di eliminare questa lacuna . Se ci sono ulteriori requisiti, il codice può essere modificato, in modo corrispondente.

Answer 2

CSS3 transformscale2d non causerà il riposizionamento degli elementi attorno ad esso. Se si desidera spostare il testo, è necessario modificare l'effettivo height e width dell'elemento.

Answer 3

L'unica soluzione che posso pensare sarebbe quella di rimuovere l'elemento dal flusso DOM (impostarlo come padre su position: relative, quindi posizionare assolutamente l'elemento) e animare il padding-top dell'elemento successivo. (Prefissi meno vendor) 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>