Erweitern eines Div von seiner Mitte aus mit CSS

Im Bereich der CSS-Transformationen könnte man sich vorstellen, dass sich Div-Elemente elegant von ihrer Mittelachse aus erweitern anstelle des Standardverhaltens der Erweiterung von der oberen und linken Ecke aus. Allerdings stellt dieser gewünschte Effekt ohne JavaScript eine Herausforderung dar.

Die Lösung: Ränder manipulieren

Der Schlüssel zum Erreichen dieser zentrierten Erweiterung liegt im Übergang der Ränder des Div mithilfe eines bestimmten Formel. Bei dieser Technik wird die Differenz zwischen der Zielgröße und der Anfangsgröße berechnet und das Ergebnis durch zwei geteilt. Dieser Wert wird dann während des Übergangs als negative Margenanpassung angewendet.

Anpassungsoptionen:

Je nach gewünschtem Verhalten stehen drei Hauptoptionen zur Verfügung:

Option 1: Platz bewahren

Diese Option erweitert das Div innerhalb des reservierten Raums um es herum und lässt umgebende Elemente davon unberührt.

#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) */
}

Option 2: Umgebende Elemente überschreiben

Durch das Festlegen negativer Ränder bewirkt diese Option, dass sich das Div über benachbarte Elemente ausdehnt und deren Inhalt überlappt.

#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) */
}

Option 3: Umgebende Elemente verschieben

Diese Variante verschiebt das div und verschiebt nachfolgende Elemente im Dokumentfluss nach unten.

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

Hinweis: Diese Berechnungen gelten für quadratische Divs. Bei nicht quadratischen Elementen können die Berechnungen für Randanpassungen je nach gewünschter proportionaler Größenänderung geringfügig variieren.