Pourquoi mes éléments transformés reviennent-ils au survol ?

Pourquoi ma transformation revient-elle en arrière ?

Dans le domaine du CSS, la transformation insaisissable qui disparaît peut être un phénomène déroutant. Ici, nous nous penchons sur un cas spécifique de ce problème, où la transformation d'un élément semble s'inverser lors de la transition.

Problème : Transformation des éléments Snap Back

Considérez le code CSS suivant :

<code class="css">.blockquote {
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

Lors du survol de l'élément blockquote, l'effet est étrange. Bien que les événements de transformation se déclenchent initialement, les éléments traduits reviennent finalement à leurs positions d'origine.

Cause et solution

Le nœud de ce problème réside dans le Propriété CSS "affichage". Les transformations CSS sont généralement incompatibles avec les éléments définis pour display: inline. Par conséquent, pour résoudre le problème d'accrochage, il est nécessaire de modifier le paramètre d'affichage pour afficher : inline-block.

Vous trouverez ci-dessous le code mis à jour :

<code class="css">.blockquote {
  display: inline-block;
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

Avec ce changement, la transition devrait fonctionner comme prévu et les éléments conserveront leurs positions transformées en survol.

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!