Afzonderlijke transformatie-eigenschappen

Met de property transform kunt u meerdere transformaties in een bepaalde volgorde toepassen, maar als u wijzigingen aanbrengt in één transformatie, moet u de hele transformatieketen opnieuw opgeven. Hierdoor is het lastig om een enkele transformatie te animeren of over te laten gaan.

Met de afzonderlijke CSS-transformatie-eigenschappen (translate, rotate en scale) kun je transformaties onafhankelijk van de eigenschap transform toepassen. Met deze aanpak is het makkelijker om één transformatie te overschrijven, bijvoorbeeld op :hover.

Belangrijke implementatiegegevens

Afzonderlijke transformatie-eigenschappen worden altijd toegepast in een vaste volgorde, ongeacht de volgorde in je CSS:

1. translate
2. rotate
3. scale
4. transform (als laatste toegepast)

Als u een andere volgorde nodig heeft (bijvoorbeeld schalen vóór draaien), moet u de transform-eigenschapsfuncties blijven gebruiken.

Transformatiefuncties overschrijven de afzonderlijke transformatie-eigenschappen niet. Met andere woorden: scale: 2; transform: scale(3); wordt eerst 2x geschaald en daarna nog eens 3x, dus in totaal 6x.

Onverwachte wijzigingen in stapelcontexten en bevattende blokken voorkomen

De eigenschap transform en afzonderlijke transformatie-eigenschappen hebben invloed op de vormgeving en weergave van de pagina en kunnen onverwacht gedrag veroorzaken met de z-index of ankerpositionering. VERPLICHT: Als een element een transformatie kan krijgen als onderdeel van een statuswijziging zoals :hover, of een overgang of animatie, pas je een identiteitstransformatie toe op het basiselement. Zo zorgt u dat de stapelcontext en de insluiting van het element niet veranderen wanneer een transformatie wordt toegepast.

.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;
}

Onafhankelijke animatie en overgangen

Het belangrijkste voordeel is de mogelijkheid om overlappende animaties of overgangen te definiëren die verschillende eigenschappen targeten zonder conflicten.

.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; }
}

Reservestrategieën

Gebruik de traditionele property transform voor browsers die geen afzonderlijke transformatie-eigenschappen ondersteunen. Houd er rekening mee dat je hiervoor de hele transformatiestack opnieuw moet declareren als je een deel in een andere status wilt wijzigen.

.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;
  }
}