Comment réaliser une expansion centrée pour un élément DIV à l'aide de transitions CSS ?

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

Dans cette question, nous visons à créer un effet où un div se développe à partir de son centre, plutôt que l'expansion typique du coin supérieur gauche. Bien que les transformations CSS telles que scale() puissent obtenir cet effet, elles manquent de précision en pixels et n'affectent pas la mise en page environnante.

La clé pour obtenir ce comportement réside dans la transition de la marge. En calculant une valeur de marge spécifique, nous pouvons faire agrandir le div à partir du centre sans interférer avec le flux de documents.

Options pour l'expansion centrale

Option 1 : Expansion dans l'espace réservé

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

Dans cette option, le div se développe dans un espace pré-réservé autour de lui. La transition de marge est calculée comme la marge initiale moins la moitié du changement de largeur/hauteur.

Option 2 : Expansion sur les éléments environnants

<code class="css">#square {
  margin: 0;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  margin: -50px;
}</code>

Avec cette option, le div s'étend sur tous les éléments environnants. La transition de marge est calculée comme 0 moins la moitié du changement de largeur/hauteur.

Option 3 : Expansion sur et déplacement d'autres éléments

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

Cette option permet au div pour étendre les éléments précédents du flux, tout en décalant les éléments suivants. Les transitions de marge sont calculées de la même manière que les options précédentes.

Considérations pour les DIV non carrés

Les options ci-dessus supposent un div carré, mais elles peuvent également être appliquées à divs non carrés avec de légers ajustements aux calculs de marge. Par exemple, un rectangle de largeur et de hauteur inégales peut faire l'objet d'une transition en utilisant des marges comme :

<code class="css">margin: -50px -100px;</code>

En résumé, en manipulant la marge à l'aide de transitions CSS, il est possible de créer un div qui s'étend à partir de son centre, affectant la disposition environnante comme vous le souhaitez.

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!