8

CSS 変換を使用して要素をスケーリングすると、ドキュメント フローにどのように影響するか、本当に混乱しています。

このjsbinまたはこのcodepenを検討してください。jsbinは私が持っている場所に落ちたようです

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

スタイルシートで

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

これは、単一の 100x100 の青い正方形と同じように表示されると思います。しかし、それはシフトされており、クロムでは次の p 要素とわずかに重なっています。さらに、devtools で #scaled のサイズを調べると、100x100 ボックスを超えているように見えます。

最後に、overflow: hidden;#scaled に追加すると、まったくおかしなことが起こります。

何が起こっている？コンテンツ フローはどのように影響を受けると想定されていますか?

4

1 に答える 1

14

CSS Transform はドキュメント フローには影響しません。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;
}
于 2013-01-17T19:56:31.243 に答える