CSS を使用して中心から Div を展開する

CSS 変換の領域では、div 要素が中心軸から優雅に展開することを想像するかもしれません。上隅と左隅から展開するデフォルトの動作ではなく、ただし、この望ましい効果は JavaScript なしでは課題になります。

解決策: マージンの操作

この中央揃えの拡張を実現する鍵は、特定のメソッドを使用して div のマージンを移行することにあります。式。この手法では、ターゲット サイズと初期サイズの差を計算し、結果を 2 で割ります。この値は、移行中にマイナスのマージン調整として適用されます。

カスタマイズ オプション:

目的の動作に応じて、次の 3 つの主要なオプションが使用できます:

オプション 1: スペースの保持

このオプションは、周囲の要素を残したまま、周囲に確保されたスペース内で div を拡張します。影響を受けません。

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

オプション 2: 周囲の要素をオーバーライドする

負のマージンを設定することにより、このオプションにより、div が近くの要素の上に拡張され、コンテンツが重なり合います。

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

オプション 3: 周囲の要素を移動する

このバリエーションでは、div を移動し、後続の要素をドキュメント フローの下に移動します。

#square {
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    top: -50px; /* calculated as initial top - ((new height - initial height)/2) */
    left: -50px; /* calculated as initial left - ((new width - initial width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}

注: これらの計算は正方形の div に適用されます。非正方形要素の場合、マージン調整の計算は、希望する比例的なサイズ変更に応じて若干異なる場合があります。