Abo
  • Services:

3D-Transforms in Webkit

3D-Animationen im Browser mit CSS, ohne JavaScript oder Plug-ins

Die Browser-Engine Webkit unterstützt in der aktuellen Entwicklerversion sogenannte 3D-Transforms. Damit lassen sich Elemente auf Webseiten im dreidimensionalen Raum positionieren und in Kombination mit CSS Transitions bewegen.

Artikel veröffentlicht am ,

Apples Safari Mobile unterstützt 3D-Transforms schon seit der Veröffentlichung von iPhoneOS 2.0. Nun halten sie auch in der Desktopversion von Webkit Einzug. Webkit implementiert die von Apple stammende, noch unfertige W3C-Spezifikation für CSS 3D Transforms Module Level 3.

 

Stellenmarkt
  1. Delta Energy Systems (Germany) GmbH, Teningen
  2. ESG Elektroniksystem- und Logistik-GmbH, München

Die 3D-Transforms ermöglichen die Positionierung von Elementen auf einer Webseite im dreidimensionalen Raum mittels CSS. Kombiniert mit CSS Transitions lassen sich so Animationen ohne JavaScript oder Plug-ins erzeugen. Sie werden allein in CSS definiert und können hardwarebeschleunigt ausgeführt werden.

Dabei erweitern die 3D-Transforms die schon länger in Webkit enthaltenen 2D-Transforms und werden wie diese mit "-webkit-transform:" eingebunden. Dabei stehen aber in den aktuellen Nightly-Builds von Webkit neue Funktionen zur Verfügung.

Zu diesen zählen "translate3d" und "translateZ", mit denen sich Elemente im dreidimensionalen Raum bewegen lassen. Mit dem Parameter z kann das Element näher oder weiter vom Nutzer positioniert werden. Mit "scale3d" und "scaleZ" lassen sich Elemente vergrößern, wobei über scaleZ die Skalierung transformierter Kind-Elemente entlang der Z-Achse definiert wird.

Zum Rotieren von Elementen stehen "rotateX", "rotateY" und "rotate3d" zur Verfügung. Mit "perspective" kann ein Perspektiveneffekt für einzelne Elemente definiert werden. Ergänzt wird dies durch "-webkit-perspective", was sich dann auf alle Elemente bezieht und anhand von Größenveränderungen entlang der Z-Achse den Eindruck von Tiefe vermitteln soll. Für komplexe Transformationen steht "matrix3d" zur Verfügung. Mit "-webkit-backface-visibility" lässt sich zudem festlegen, ob Objekte durchsichtig sind oder nicht.

Die 3D Transforms funktionieren mit aktuellen Nightly Builds von Webkit unter MacOS X ab Version 10.5 alias Leopard. Unter Windows funktionierten die Beispiele nur eingeschränkt. Details zu den unterstützten 3D-Funktionen erläutern die Webkit-Entwickler in einem Blogeintrag.



Anzeige
Blu-ray-Angebote
  1. (u. a. 3 Blu-rays für 15€, 2 Neuheiten für 15€)
  2. (u. a. Logan, John Wick, Alien Covenant, Planet der Affen Survival)

Der Kaiser! 01. Aug 2009

Ich find ja das* viel beeindruckender.. *http://yocode.de/work/jscript/flip/flip.html

Der Kaiser! 01. Aug 2009

Microsoft Windows.

Luglio 19. Jul 2009

Dann lad die die neueste Webkit Version oder nimm ein iPhone oder einen iPod Touch, geh...

titrat 19. Jul 2009

vrml gibt es schon ewig - hat nur niemand interessiert, obwohl es sogar der ie konnte.

stpn 17. Jul 2009

Das sind (wenn man den Quellcode betrachtet) alles 2D Transformationen, die einfach zu...


Folgen Sie uns
       


Red Dead Redemption 2 - Golem.de live

Wir reden gemeinsam mit unserer Community über das große Spiel 2018, Red Dead Redemption 2, nach dem Test.

Red Dead Redemption 2 - Golem.de live Video aufrufen
Yuneec H520: 3D-Modell aus der Drohne
Yuneec H520
3D-Modell aus der Drohne

Multikopter werden zunehmend auch kommerziell verwendet. Vor allem machen die Drohnen Luftbilder und Inspektionsflüge und vermessen. Wir haben in der Praxis getestet, wie gut das mit dem Yuneec H520 funktioniert.
Von Dirk Koller


    Sony-Kopfhörer WH-1000XM3 im Test: Eine Oase der Stille oder des puren Musikgenusses
    Sony-Kopfhörer WH-1000XM3 im Test
    Eine Oase der Stille oder des puren Musikgenusses

    Wir haben die dritte Generation von Sonys Top-ANC-Kopfhörer getestet - vor allem bei der Geräuschreduktion hat sich einiges getan. Wer in lautem Getümmel seine Ruhe haben will, greift zum WH-1000XM3. Alle Nachteile der Vorgängermodelle hat Sony aber nicht behoben.
    Ein Test von Ingo Pakalski


      Autonome Schiffe: Und abends geht der Kapitän nach Hause
      Autonome Schiffe
      Und abends geht der Kapitän nach Hause

      Weite Reisen in ferne Länder, eine Braut in jedem Hafen: Klischees über die Seefahrt täuschen darüber hinweg, dass diese ein Knochenjob ist. Doch in wenigen Jahren werden Schiffe ohne Besatzung fahren, überwacht von Steuerleuten, die nach dem Dienst zur Familie zurückkehren. Daran arbeitet etwa Rolls Royce.
      Ein Bericht von Werner Pluta

      1. Elektromobilität San Francisco soll ein Brennstoffzellenschiff bekommen
      2. Yara Birkeland Autonome Schiffe sind eine neue Art von Transportsystem
      3. Power Pac Strom aus dem Container für Ozeanriesen

        •  /