Neues

Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing


Webkit erlaubt es nun, 3D-Transformationen über CSS zu realisieren.

CSS Dreidimensional mit Webkit

Webkit unterstützt jetzt 3D Transformationen, womit Elemente auf Webseiten über CSS dreidimensional positioniert werden können. Damit das funktioniert, ist allerdings der aktuelle Nightly Build von Webkit in Version r46091 nötig. Diesen gibt es derzeit leider nur für Mac OS X.

Hier gibt es den Nightly Build Webkit r46091 für Mac.

Diese 3D-Funktionalität wird für das iPhone bereits seit Version 2.0 geboten. Man benötigt also das Betriebssystem Leopard oder später, sowie das aktuelle Webkit.

Was es mit dieser erweiterten CSS Transformation auf sich hat, kann man hier lesen.

Man verwendet die gleichen CSS-Eigenschaften, wie für 2D Transformationen. Will man zum Beispiel ein Element über die Y-Achse, also vertikal rotieren lassen, schreibt man folgendes:

-webkit-transform: rotateY(45deg);

Für die Funktion -webkit-transform gibt es diverse neue Eigenschaften. So lassen sich Elemente zum Beispiel auch in x, y und z-Richtung skalieren oder bewegen. Es lassen sich Perspektiven erzeugen und eine 4x4 3D-Matrix mit 16 Werten verwenden.

Hier gibt es eine Übersicht zum CSS 3D Transforms Module Level 3.

Weitere Informationen finden sich auch im Webkit-Blog.

Cookies erleichtern die Bereitstellung unserer Dienste. Über deren Verwendung kann hier frei entschieden werden.
Datenschutzerklärung Ok Ablehnen