Wie lässt sich ein Div mithilfe von CSS von seiner Mitte aus erweitern?

Ein Div von der Mitte aus mit CSS erweitern

Wenn wir ein Div mit CSS erweitern, wird es normalerweise von der oberen linken Ecke aus erweitert, wobei die Mitte unberührt bleibt. Es kann jedoch Szenarien geben, in denen die Erweiterung ihren Ursprung in der Mitte des Div haben soll. Mit kreativen CSS-Techniken können wir diesen Effekt erzielen, wie unten erläutert.

Der Schlüssel: Rand per Formel anpassen

Um das Div von der Mitte aus zu erweitern, liegt der Schlüssel im Übergang des Randes. Eine Formel wird verwendet, um den Rand anzupassen und sicherzustellen, dass die Erweiterung symmetrisch um den Mittelpunkt herum erfolgt.

Option 1: Innerhalb des reservierten Raums erweitern

Diese Option erweitert das Div innerhalb des reservierten Raums um es herum :

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

Option 2: Über umgebende Elemente erweitern

Hier wird das Div über die umgebenden Elemente erweitert:

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

Option 3: Elemente erweitern und verschieben der Dokumentenfluss

Diese Option erweitert das div über Elemente davor im Fluss und verschiebt Elemente danach:

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

Hinweis zu nicht quadratischen Elementen

Die bereitgestellten Die Lösung eignet sich am besten für quadratische Elemente. Bei nicht quadratischen Elementen muss der Übergang für jede Richtung unterschiedlich angepasst werden. Beispielsweise können wir die Breite doppelt so stark anpassen wie die Höhe:

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

Durch die Befolgung dieser Techniken können wir den gewünschten Effekt der Erweiterung eines Divs von seiner Mitte aus erzielen, ohne auf JavaScript zurückgreifen zu müssen.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein Div mithilfe von CSS von seiner Mitte aus erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!