CSSのスケール変換はドキュメントフローにどのような影響を与えますか？

Question

私は、CSSの変換を使って要素を拡大縮小すると、ドキュメントの流れにどのように影響するのか本当に混乱しています。私はスタイルシート

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

と

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

を持って

Consider this jsbinまたはthis codepen since jsbin seems to have gone down私は、これは、単一の100x100の青い四角と同様に現れることを期待します。しかし、それはシフトされ、クロム上で次のp要素と少し重なる。さらに、devtoolsの#scaledの大きさを調べると、それは100x100ボックスを超えて一見壊れていて長く見えます。

最後に、overflow: hidden;を#scaledに追加すると、何か狂ったことが起こります。

何が起こっていますか？コンテンツフローはどのような影響を受けると思われますか？

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