Agrandissement d'un div à partir de son centre à l'aide de CSS

Dans le domaine des transformations CSS, on pourrait imaginer que des éléments div se développent gracieusement à partir de leur axe central , plutôt que le comportement par défaut consistant à développer à partir du coin supérieur et gauche. Cependant, cet effet souhaité présente un défi sans JavaScript.

La solution : manipuler les marges

La clé pour réaliser cette expansion centrée réside dans la transition des marges du div à l'aide d'un formule. La technique consiste à calculer la différence entre la taille cible et la taille initiale et à diviser le résultat par deux. Cette valeur est ensuite appliquée sous forme d'ajustement de marge négatif lors de la transition.

Options de personnalisation :

En fonction du comportement souhaité, trois options principales sont disponibles :

Option 1 : Préserver l'espace

Cette option étend le div dans l'espace réservé autour de lui, laissant les éléments environnants non affecté.

#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 : Remplacer les éléments environnants

En définissant des marges négatives, cette option amène le div à s'étendre sur les éléments proches, chevauchant leur contenu.

#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 : Déplacement des éléments environnants

Cette variante décale le div et déplace les éléments suivants vers le bas du flux de documents.

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

Remarque : Ces calculs s'appliquent aux divisions carrées. Pour les éléments non carrés, les calculs d'ajustements de marge peuvent varier légèrement en fonction du redimensionnement proportionnel souhaité.