CSS トランジションを使用して DIV 要素の中心展開を実現するにはどうすればよいですか?

CSS を使用して DIV を中心から拡張する

この質問では、div が中心から拡張するエフェクトを作成することを目的としています。典型的な左上隅からの展開ではなく。 scale() などの CSS 変換はこの効果を実現できますが、ピクセル精度に欠けており、周囲のレイアウトに影響を与えません。

この動作を実現する鍵は、マージンを移行することにあります。特定のマージン値を計算することで、ドキュメント フローを妨げずに div を中心から展開させることができます。

中央展開のオプション

オプション 1 : 予約されたスペース内の拡張

<code class="css">#square {
  margin: 100px;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 100px;
  height: 100px;
  margin: 55px;
}</code>

このオプションでは、div は周囲の事前に予約されたスペース内で拡張されます。マージンの移行は、最初のマージンから幅/高さの変化の半分を引いたものとして計算されます。

オプション 2: 周囲の要素への拡張

<code class="css">#square {
  margin: 0;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  margin: -50px;
}</code>

このオプションでは、 div は周囲の要素の上に展開されます。マージンの移行は、0 から幅/高さの変化の半分を引いたものとして計算されます。

オプション 3: 他の要素の拡張とシフト

<code class="css">#square {
  position: relative;
  transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  top: -50px;
  left: -50px;
  margin-right: -50px;
  margin-bottom: -50px;
}</code>

このオプションでは、 div を使用して、後続の要素をシフトしながら、フロー内の先行する要素を拡張します。マージン遷移は前のオプションと同様に計算されます。

非正方形 DIV に関する考慮事項

上記のオプションは正方形の DIV を前提としていますが、次のオプションにも適用できます。マージン計算をわずかに調整した非正方形 div。たとえば、幅と高さが等しくない四角形は、次のようなマージンを使用してトランジションできます。

<code class="css">margin: -50px -100px;</code>

要約すると、CSS トランジションを使用してマージンを操作することで、中心から拡張する div を作成できます。必要に応じて周囲のレイアウトに影響を与えます。

以上がCSS トランジションを使用して DIV 要素の中心展開を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。