Maison >interface Web >tutoriel CSS >Pourquoi mes éléments transformés CSS reviennent-ils en place au lieu de rester en place ?

Pourquoi mes éléments transformés CSS reviennent-ils en place au lieu de rester en place ?

DDD
DDDoriginal
2024-10-30 05:21:021055parcourir

Why do my CSS transformed elements snap back instead of staying in place?

Pourquoi un élément revient-il après une transformation au lieu de rester en place ?

Lorsque vous essayez de maintenir un élément dans sa position transformée après Lors d'une transition, l'élément peut revenir inopinément à son emplacement d'origine. Ce problème survient généralement en raison de paramètres d'affichage incompatibles pour les transformations CSS.

Cause

Les transformations CSS ne fonctionnent généralement pas correctement avec les éléments qui ont le paramètre display: inline. Bien que la transformation initiale semble prendre effet, le paramètre en ligne fait revenir l'élément à sa position précédente.

Solution

Pour résoudre ce problème, modifiez le paramètre d'affichage. à afficher : inline-block, comme le montre l'extrait CSS suivant :

.blockquote {
  display: inline-block;
  ...
}

En passant au inline-block, vous autorisez les transformations CSS à fonctionner avec succès sur l'élément, l'empêchant de revenir en arrière et de le conserver dans sa position modifiée après la transition.

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