Einzelne Transformationseigenschaften

Mit dem Attribut transform können Sie mehrere Transformationen in einer bestimmten Reihenfolge anwenden. Wenn Sie jedoch eine einzelne Transformation ändern, müssen Sie die gesamte Transformationskette neu angeben. Das macht es schwierig, eine einzelne Transformation zu animieren oder zu übergehen.

Mit den einzelnen CSS-Transformations-Properties (translate, rotate und scale) können Sie Transformationen unabhängig von der Property transform anwenden. Dieser Ansatz erleichtert das Überschreiben einer einzelnen Transformation, z. B. für :hover.

Wichtige Implementierungsdetails

Einzelne Transformationseigenschaften werden immer in einer festen Reihenfolge angewendet, unabhängig von ihrer Reihenfolge im CSS:

1. translate
2. rotate
3. scale
4. transform (zuletzt angewendet)

Wenn Sie eine andere Reihenfolge benötigen (z.B. Skalierung vor der Drehung), müssen Sie weiterhin die transform-Attributfunktionen verwenden.

Transformationsfunktionen überschreiben nicht die einzelnen Transformationseigenschaften. Mit anderen Worten: scale: 2; transform: scale(3); wird zuerst um das Zweifache und dann noch einmal um das Dreifache skaliert, also insgesamt um das Sechsfache.

Unerwartete Änderungen in Stapelkontexten und enthaltenden Blöcken verhindern

Die Property transform und einzelne Transformations-Properties wirken sich auf das Layout und das Rendering der Seite aus und können zu unerwartetem Verhalten beim Z-Index oder bei der Ankerpositionierung führen. OBLIGATORISCH: Wenn auf ein Element im Rahmen einer Statusänderung wie :hover oder eines Übergangs oder einer Animation eine Transformation angewendet werden kann, wenden Sie eine Identitätstransformation auf das Basiselement an. So wird sichergestellt, dass sich der Stapelkontext und die Eingrenzung des Elements nicht ändern, wenn eine Transformation angewendet wird.

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

Unabhängige Animationen und Übergänge

Der Hauptvorteil besteht darin, dass sich überlappende Animationen oder Übergänge definieren lassen, die auf verschiedene Eigenschaften abzielen, ohne dass es zu Konflikten kommt.

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

Fallback-Strategien

Verwenden Sie für Browser, die keine einzelnen Transformations-Properties unterstützen, die herkömmliche transform-Property. Beachten Sie, dass Sie den gesamten Transformationsstapel neu deklarieren müssen, wenn Sie einen Teil in einem anderen Zustand ändern möchten.

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