In che modo la trasformazione in scala css influisce sul flusso del documento?

Question

Sono davvero confuso su come ridimensionare un elemento utilizzando le trasformazioni CSS influisce sul flusso del documento.

Consider this jsbin o this codepen since jsbin seems to have gone down dove ho

p{slipsum text} 
#scaled 
    #scaled-content{some text} 
p{slipsum text} 

con il foglio di stile

#scaled-contents { 
    height: 400px; 
    width: 400px; 
    background-color: blue; 
    color: red; 
    font-size: 3em; 
} 

#scaled { 
    transform: scale(0.25, 0.25); //browser prefixes... 
    width: 100px; 
    height: 100px 
} 

mi aspetterei questo di presentarsi in modo simile a un singolo 100x100 quadrato blu. Ma è spostato e su Chrome anche sovrappone leggermente il seguente elemento p. Inoltre, l'esame delle dimensioni di #scaled in devtools mostra come squat e lungo, apparentemente oltre la casella 100x100.

Infine, l'aggiunta di overflow: hidden; a #scaled fa qualcosa di pazzesco.

Cosa sta succedendo? Come dovrebbe essere influenzato il flusso di contenuti?

Answer 1

La trasformazione CSS non influisce sul flusso del documento. L'elemento DOM occuperà la posizione e le dimensioni originali all'interno del flusso della pagina.

Quindi se si dispone di 3 div quadrate di dimensioni identiche, visualizzate in linea in fila e si applica un -webkit-transform: scala (2) al quadrato centrale, questo quadrato si scala fino al 200% più grande, scala dal centro della sua posizione originale e si sovrappongono entrambi gli altri quadrati. esempio

Riferimento:

http://jsfiddle.net/ypnEk/

HTML:

<div class="square one"></div> 
<div class="square two"></div> 
<div class="square three"></div> 

CSS:

.square{ 
    margin-top:50px; 
    width:50px; 
    height:50px; 
    display:inline-block; 
} 

.one{ 
    background:#222; 
} 

.two{ 
    background:#888; 
    -webkit-transform: scale(2); 
} 

.three{ 
    background:#ccc; 
}