• IT-Karriere:
  • 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. Versicherungskammer Bayern, München
  2. über duerenhoff GmbH, Wien (Österreich)

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.

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


Anzeige
Top-Angebote
  1. (aktuell u. a.Corsair M65 RGB Elite als neuwertiger Outlet-Artikel für 29,99€ + Versand)
  2. 249€ (Vergleichspreis 277,99€)
  3. (u. a. bis -25% auf Monitore und Notebooks, 15% auf Hardware und bis -40% auf Zubehör und Software)
  4. (u. a. Frühjahrsangebote mit reduzierter Hardware, PC-Zubehör und mehr)

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
       


Samsung Galaxy S20 Ultra - Test

Das Galaxy S20 Ultra ist Samsungs Topmodell der Galaxy-S20-Reihe. Der südkoreanische Hersteller verbaut erstmals seinen 108-Megapixel-Kamerasensor - im Test haben wir uns aber mehr davon versprochen.

Samsung Galaxy S20 Ultra - Test Video aufrufen
Elektromobilität: Ein Besuch im tschechischen Grünheide
Elektromobilität
Ein Besuch im tschechischen Grünheide

Der Autohersteller Hyundai fertigt einen Teil seiner Kona Elektros jetzt in der EU. Im tschechischen Nošovice rollen pro Jahr bis zu 35.000 Elektroautos vom Band - sollte es keine Corona-bedingten Unterbrechungen geben. Ein Werksbesuch.
Von Dirk Kunde

  1. Crossover-Elektroauto Model Y fährt effizienter als Model 3
  2. Wohnungseigentumsgesetz Regierung beschließt Anspruch auf private Ladestelle
  3. Plugin-Hybride BMW setzt Anreize für höhere Stromerquote

Arduino: Diese Visitenkarte ist ein Super-Mario-Spielender-Würfel
Arduino
Diese Visitenkarte ist ein Super-Mario-Spielender-Würfel

Eine Visitenkarte aus Papier ist langweilig! Der Elektroniker Patrick Schlegel hat eine Platine als Karte - mit kreativen Funktionen.
Von Moritz Tremmel

  1. Thinktiny Mini-Spielekonsole sieht aus wie winziges Thinkpad

Next-Gen: Welche neue Konsole darf's denn sein?
Next-Gen
Welche neue Konsole darf's denn sein?

Playstation 5 oder Xbox Series X: Welche Konsole besser wird, wissen wir auch noch nicht. Grundüberlegungen zur Hardware und den Ökosystemen.
Ein IMHO von Peter Steinlechner

  1. Elektroschrott Kauft keine kleinen Konsolen!
  2. IMHO Porsche prescht beim Preis übers Ziel hinaus

    •  /