CSS/Eigenschaften/äußere Gestaltung/3D-Transformationen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Webseiten und ihre grafischen Effekte werden im Allgemeinen vom Browser gerendert. Dabei kann es bei größeren Transformationen und Animationen zu kleinen Verzögerungen kommen. Um dies zu vermeiden, übergeben moderne Browser rechechenintensive Operationen an die GPU. So können Animationen glatt und ruckelfrei ausgeführt werden.

Bei Transformationen können Sie diese Hardwarebeschleunigung durch eine Verwendung der entsprechenden <function>3d() oder <function>Z() aktivieren.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari


Empfehlung: Verwenden Sie die 3d-Funktionen auch bei 2d-Transformationen, um Ihre Webseiten hardwarebeschleunigt rendern lassen zu können.
Beispiel
transform: translateX(100px);


Beispiel: hardwarebeschleunigte 3D-Funktion
transform: translate3d(100px,0,0);


Weblinks[Bearbeiten]