Comment développer une division à partir de son centre en utilisant CSS ?

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

Lorsque nous développons un div à l'aide de CSS, il s'étend généralement à partir de son coin supérieur gauche, laissant le centre intact. Cependant, il peut y avoir des scénarios dans lesquels nous souhaitons que l'expansion provienne du centre de la div. Avec des techniques CSS créatives, nous pouvons obtenir cet effet, comme indiqué ci-dessous.

La clé : ajuster la marge via la formule

Pour étendre le div à partir du centre, la clé réside dans la transition de la marge. Une formule est utilisée pour ajuster la marge, garantissant que l'expansion se produit symétriquement autour du point central.

Option 1 : Développer dans l'espace réservé

Cette option étend le div dans l'espace réservé qui l'entoure. :

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

Option 2 : Développer sur les éléments environnants

Ici, le div se développe sur les éléments environnants :

<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 : Développer et déplacer les éléments dans le flux de documents

Cette option étend le div sur les éléments qui le précèdent dans le flux et décale les éléments qui le suivent :

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

Remarque sur les éléments non carrés

Le fourni la solution fonctionne mieux pour les éléments carrés. Pour les éléments non carrés, la transition doit s'ajuster différemment pour chaque direction. A titre d'exemple, nous pouvons ajuster la largeur deux fois plus que la hauteur :

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

En suivant ces techniques, nous pouvons obtenir l'effet souhaité d'étendre un div à partir de son centre, sans recourir à JavaScript.

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!