CSSを使用してDivを中心から展開させるにはどうすればよいですか?

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

CSS を使用して div を展開する場合、通常は左上隅から展開され、中央は変更されません。ただし、展開を div の中心から開始したいシナリオもあるかもしれません。以下で説明するように、クリエイティブな CSS テクニックを使用すると、この効果を実現できます。

鍵: 数式を使用してマージンを調整

div を中心から拡張するには、マージンを移行することが鍵となります。マージンを調整するために式が使用され、中心点を中心に展開が対称的に行われるようにします。

オプション 1: 予約されたスペース内で展開

このオプションは、周囲の予約されたスペース内で div を展開します。 :

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

オプション 2: 周囲の要素に展開します

ここでは、div が周囲の要素に展開します:

<code class="css">#square {
    margin: 0; /*for centering purposes*/
    transition: width 1s, height 1s, margin 1s;
    ...
}
#square:hover {
    margin: -50px; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}</code>

オプション 3: 要素を展開およびシフトしますドキュメント フロー

このオプションは、フロー内の要素の前に div を展開し、その後の要素をシフトします:

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

非正方形要素に関する注意

提供されているこのソリューションは正方形の要素に最適です。非正方形要素の場合、トランジションは方向ごとに異なる調整を行う必要があります。例として、幅を高さの 2 倍に調整できます。

<code class="css">#rectangle {
    transition: width 1s, height 1s, margin 1s;
    ...
}
#rectangle:hover {
    margin: -50px -100px; /* margin: -50px -((initial margin - width change (or height change))/2) */
}</code>

これらの手法に従うことで、JavaScript に頼ることなく、div を中心から拡張するという望ましい効果を達成できます。

以上がCSSを使用してDivを中心から展開させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。