W jaki sposób transformacja w skali css wpływa na przepływ dokumentów?

Question

Jestem naprawdę zdezorientowany, jak skalowanie elementu za pomocą transformacji css wpływa na przepływ dokumentów.

Consider this jsbin lub this codepen since jsbin seems to have gone down gdzie mam

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

z arkusza

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

bym tego spodziewać, aby pokazać się podobnie do jednego 100x100 niebieski kwadrat. Ale jest przesunięty i na chromie nawet nieznacznie nachodzi na następujący element p. Ponadto, sprawdzanie wymiarów #scaled w devtools pokazuje jako przysadzisty i długi, pozornie przekraczając jego pole 100x100.

Wreszcie, dodanie do #scaled nawet overflow: hidden; powoduje, że coś jest szalone.

Co się dzieje? Jak wpływa się na przepływ treści?

Answer 1

Transformacja CSS nie wpływa na obieg dokumentów. Element DOM zajmie jego oryginalną pozycję i wymiary w przepływie strony.

Więc jeśli masz 3 kwadratowe div o identycznym rozmiarze, wyświetlane w linii z rzędu i zastosować -webkit-transform: skala (2) do centralnego kwadratu, kwadrat ten będzie skalować do 200% większy, skali od centrum jego pierwotnego położenia i pokrywają się z pozostałymi kwadratami. Przykładem

referencyjny:

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