CSS 스케일 변형은 문서 흐름에 어떤 영향을 줍니까?

Question

CSS 변환을 사용하여 요소 크기를 조정하면 문서 흐름에 어떤 영향을 미치는지 정말 혼란 스럽습니다.

Consider this jsbin 또는 this codepen since jsbin seems to have gone down는 어디 스타일 시트

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

나는이 하나의 100 × 100 파란색 사각형과 유사하게 표시 기대와

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

있습니다. 그러나 그것은 이동되고 크롬에서 다음의 p 요소와 약간 겹치기까지합니다. 또한, devtools에서 #scaled의 크기를 조사하면 쪼그리고 앉아서 길게 보입니다. 100x100 상자를 뛰어 넘는 것처럼 보입니다.

마지막으로 #scaled에 overflow: hidden;을 추가하는 것은 완전히 이상한 일을합니다.

무슨 일입니까? 콘텐츠 흐름이 어떻게 영향을 받습니까?

Answer 1

CSS 변형은 문서 흐름에 영향을주지 않습니다. DOM 요소는 페이지 흐름 내에서 원래 위치와 크기를 차지합니다.

동일한 크기의 3 제곱 div가 있고 행에 인라인으로 표시되고 -webkit-transform : scale (2)를 가운데 정사각형에 적용하면이 정사각형은 200 % 큰 배율로 원래 위치의 중앙에 있고, 다른 두 개의 사각형과 중첩됩니다.

참조 예 :

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