Comment étendre une division depuis son centre à l'aide de transitions CSS ?

Comment étendre une div à partir du centre au lieu de simplement en haut et à gauche en utilisant CSS

Il est possible d'obtenir l'effet souhaité en développant une div depuis son centre en utilisant CSS, même s'il est important de noter que l'approche exacte dépendra du contexte et de l'interaction souhaités. Voici une option qui peut être utilisée :

En utilisant la propriété de transition sur la marge, vous pouvez créer l'effet d'étendre le div à partir de son centre. Définissez initialement une grande marge autour du div, et lorsque l'utilisateur survole celui-ci, réduisez la marge de moitié par rapport à la largeur et à la hauteur à laquelle le div s'étend.

Par exemple, supposons que nous ayons un div avec une largeur initiale. et une hauteur de 10 px, et nous voulons qu'il s'étende à 100 px en survol. Nous définirions le CSS suivant :

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

Cela crée l'effet d'étendre le div à partir de son centre. Gardez à l'esprit que faire flotter le div peut introduire un léger « tremblement » pendant la transition, il est donc recommandé de le maintenir en place sans aucun flottement.

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!