Advitum.de auf Google+

CSS3-Transformationen mit Matrizen – flexibler geht nicht

CSS3-Transformationen mit Matrizen – flexibler geht nicht
VN:F [1.9.22_1171]
Bewertung: 4.0/5 (2 Stimmen abgegeben)
Von am
Kategorien: CSS, Programmieren, Tipps

Als leidenschaftlicher Transformations-Nutzer habe ich diese Woche einen großen Schrecken bekommen, als plötzlich die CSS-Transformation skew nicht mehr funktionierte. Des Rätsels Lösung: Skew wurde aus dem CSS-Transform-Draft entfernt und wird deshalb in Firefox 14 plötzlich nicht mehr unterstützt. Doof nur, dass viele visuelle Tricks, die im Internet verwendet werden, ohne das Scheren eines Elementes nicht mehr funktionieren.

Auf meiner Suche nach einer Alternative stieß ich darauf, dass man in der Transformation auch direkt mit einer Matrix vollziehen kann. Leider ist das nicht ganz so einfach wie bisher, aber wenn man weiß wie es geht, ist die Transformations-Matrix sehr flexibel. Ich zeige Dir in diesem Artikel die gängigsten Transformation, die man mit einer Matrix vollziehen kann.

CSS3-Transformationen mit Matrizen - flexibler geht nicht, 4.0 out of 5 based on 2 ratings

Was ist eine Matrix?

Leider sind Matrizen schon lange kein Pflichtprogramm im Mathematikunterricht mehr, sodass auch ich in der Schule nichts von Matrizen gehört hatte. Schade, denn Matrizen sind sehr praktisch. Allgemein gesagt ist eine Matrix eine rechteckige Anordnung von Elementen, so wie ein zweidimensionales Array. Praktisch ist, dass man mit diesen Sammlungen ähnlich rechnen kann wie mit Zahlen. So kann man eine Matrix zum Beispiel mit anderen Matrizen multiplizieren.

Nun zur Transformationsmatrix. Eine Transformationsmatrix ist (für unseren Anwendungsfall soll diese Erklärung erst einmal reichen) eine 2×2-Matrix, die man mit einem Koordinaten-Paar multipliziert, um ein neues Koordinaten-Paar zu erhalten. Der Browser wendet nun diese Transformationsmatrix auf alle Punkte des Elements an, je nach Matrix wird dadurch das Element gedreht, gestaucht, skaliert, gespiegelt etc.

Die Matrix transformiert die Koordinaten.
Die Matrix befindet sich in der Mitte und wird mit den Koordinaten transformiert.

In CSS würden wir diese Matrix so schreiben:

matrix(a, b, c, d, 0, 0)

Wichtig: Die letzten beiden Werte gehören nicht zur Matrix, sie werden benutzt, um das Element einfach zu verschieben. Mit diesem Verschieben fangen wir jetzt auch einfach mal an.

Beispiel 1: Verschieben

Wir beginnen einfach mit einem einfachen Div-Element im HTML, in das wir etwas Demo-Text schreiben. Danach schreiben wir folgendes CSS:

#crunch {
	width: 30%;
	margin: 200px;
	padding: 50px;
	
	background: #feeda2;
	
	-moz-transform: matrix(1, 0, 0, 1, 0, 0);
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	-o-transform: matrix(1, 0, 0, 1, 0, 0);
	-ie-transform: matrix(1, 0, 0, 1, 0, 0);
	-ms-transform: matrix(1, 0, 0, 1, 0, 0);
	transform: matrix(1, 0, 0, 1, 0, 0);
}

Wir widmen uns nun nur der Matrix. Wir verwenden hier eine simple Matrix, die die Koordinaten unberührt lässt. Diese Matrix hat also gar keinen Einfluss auf unser Element.

Durch diese Matrix wird gar nichts verändert.

Nun wollen wir das Element 100 Pixel nach rechts und 15 Pixel nach unten verschieben. Dazu brauchen wir noch keine Matrix und können einfach die letzten beiden Parameter verwenden.

matrix(1, 0, 0, 1, 100, 15)

Beispiel 2: Rotieren

Um ein Element zu Rotieren, brauchen wir eine Rotationsmatrix. Diese können wir einfach Wikipedia entnehmen. Für eine Rotation um 45° gegen den Uhrzeigersinn notieren wir zum Beispiel folgendes:

matrix(0.7, -0.7, 0.7, 0.7, 0, 0)

Beispiel 3: Skalieren

Um das Element um den Faktor 1.5 in X-Richtung und um 2 in Y-Richtung zu stauchen, können wir folgendes schreiben:

matrix(1.5, 0, 0, 2, 0, 0)

Beispiel 4: Scheren

Dies ist eine Scherung

Um diese Scherung zu erreichen, können wir diese Matrix notieren::

matrix(1, 0, -0.5, 1, 0, 0)

Fazit

Mit Matrizen kann man also alle Transformationen ausführen. Außerdem kann man diese Transformationen alle miteinander kombinieren und so interessante Ergebnisse erzielen. Meine Empfehlung: einfach mal etwas experimentieren! Viel Spaß dabei!

CSS3-Transformationen mit Matrizen - flexibler geht nicht, 4.0 out of 5 based on 2 ratings

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Heiner Schrop schrieb am Antworten

Zwei sehr nützliche Links zu diesem Themen hätte ich noch hinzu zu fügen, für jene, die ganz schnell eine Lösung brauchen ohne stundenlang zu rechnen:

http://peterned.home.xs4all.nl/matrices/

und noch wichtiger

http://www.braekling.de/testlab/css3tools/css-transform-matrizenrechner.html

Diese Artikel könnten dir auch gefallen