Maison  >  Article  >  interface Web  >  Comment développer une division à partir de son centre en utilisant CSS ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-10-30 08:58:02108parcourir

How to Make a Div Expand from Its Center Using 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn