Comment réaliser une expansion centrée d'un élément Div en CSS sans JavaScript ?

Agrandir un Div depuis son centre à l'aide de CSS

Dans le domaine des transformations CSS, on pourrait imaginer des éléments div s'étendant 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égative 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, sans affecter les éléments environnants.

#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 : Remplacement des é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écalage É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 divs carrés. Pour les éléments non carrés, les calculs d'ajustements de marge peuvent varier légèrement en fonction du redimensionnement proportionnel souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!