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. Softwareentwickler*in / Softwareingenieur*in (w/m/d)
    Hensoldt, Wetzlar
  2. IT-Manager* (m/w/d)
    BAM - Bundesanstalt für Materialforschung und -prüfung, Berlin-Steglitz
Detailsuche

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.

Golem Karrierewelt
  1. ITIL 4® Foundation: virtueller Zwei-Tage-Workshop
    29./30.08.2022, virtuell
  2. Kubernetes – das Container Orchestration Framework: virtueller Vier-Tage-Workshop
    29.08.-01.09.2022, Virtuell
Weitere IT-Trainings

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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


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.



Aktuell auf der Startseite von Golem.de
Wissenschaft
Der Durchbruch in der Kernfusion ist ein Etikettenschwindel

National Ignition Facility hat das Lawson-Kriterium der Kernfusion erreicht, aber das gilt nur für echte Reaktoren, keine Laserexperimente.
Ein IMHO von Frank Wunderlich-Pfeiffer

Wissenschaft: Der Durchbruch in der Kernfusion ist ein Etikettenschwindel
Artikel
  1. THG-Prämie: Das fragwürdige Abkassieren mit der eigenen Wallbox
    THG-Prämie
    Das fragwürdige Abkassieren mit der eigenen Wallbox

    Findige Vermittler bieten privaten Wallbox-Besitzern Zusatzeinnahmen für ihren Ladestrom. Wettbewerber sind empört.
    Ein Bericht von Dirk Kunde

  2. 1&1 Mobilfunk: Viertes deutsches Mobilfunknetz angelaufen
    1&1 Mobilfunk
    Viertes deutsches Mobilfunknetz angelaufen

    Endlich hat 1&1 Mobilfunk erste 5G-Mobilfunkstation errichtet und einen Friendly User Test durchgeführt. Die Bekanntgabe erfolgt spät und versteckt.

  3. Internet: Indien verbannt den VLC Media Player
    Internet
    Indien verbannt den VLC Media Player

    Weder Downloadlink noch Webseite des VLC Media Players können von Indien aus aufgerufen werden. Der vermutete Grund: das Nachbarland China.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • PS5 bestellbar • Playstation Sale: Games für PS5/PS4 bis 84% günstiger • Günstig wie nie: SSD 1TB/2TB, Curved Monitor UWQHD LG 38"/BenQ 32" • Razer-Aktion • MindStar (AMD Ryzen 7 5800X3D 455€, MSI RTX 3070 599€) • Lego Star Wars Neuheiten • Bester Gaming-PC für 2.000€ [Werbung]
    •  /