Propriétés de transformation individuelles

La propriété transform vous permet d'appliquer plusieurs transformations dans un ordre spécifié, mais toute modification d'une seule transformation nécessite de spécifier à nouveau l'intégralité de la chaîne de transformation. Il est donc difficile d'animer ou de faire une transition sur une seule transformation.

Les propriétés de transformation CSS individuelles (translate, rotate et scale) vous permettent d'appliquer des transformations indépendamment de la propriété transform. Cette approche facilite le remplacement d'une seule transformation, par exemple sur :hover.

Principaux détails de l'implémentation

Les propriétés de transformation individuelles sont toujours appliquées dans un ordre fixe, quel que soit leur ordre dans votre CSS :

1. translate
2. rotate
3. scale
4. transform (appliqué en dernier)

Si vous avez besoin d'un ordre différent (par exemple, mise à l'échelle avant rotation), vous devez continuer à utiliser les fonctions de la propriété transform.

Les fonctions de transformation ne remplacent pas les propriétés de transformation individuelles. En d'autres termes, scale: 2; transform: scale(3); effectuera d'abord un scaling de 2x, puis de 3x, pour un total de 6x.

Éviter les modifications inattendues des contextes d'empilement et des blocs conteneurs

La propriété transform et les propriétés de transformation individuelles ont un impact sur la mise en page et l'affichage de la page, et peuvent entraîner un comportement inattendu avec l'index Z ou le positionnement de l'ancrage. OBLIGATOIRE : Si un élément peut se voir appliquer une transformation dans le cadre d'un changement d'état comme :hover, ou d'une transition ou d'une animation, appliquez une transformation d'identité à l'élément de base. Cela garantit que le contexte d'empilement et le confinement de l'élément ne changent pas lorsqu'une transformation est appliquée.

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

Animation et transitions indépendantes

Le principal avantage est la possibilité de définir des animations ou des transitions qui se chevauchent et qui ciblent différentes propriétés sans conflit.

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

Stratégies de remplacement

Pour les navigateurs qui ne sont pas compatibles avec les propriétés de transformation individuelles, utilisez la propriété transform traditionnelle. Notez que cela nécessite de redéclarer l'intégralité de la pile de transformation si vous souhaitez modifier une partie dans un état différent.

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}