CSS3 transform: Matrizenrechner

Aktuelle Matrix A:Transformationsmatrix B:Letzte Rechnung:
Punkt als Dezimaltrenner! (z.B. 0.5 für ½)

CSS: transform:matrix();

     

Die neue Matrix A⋅B wird oben direkt für A übernommen.

Mehr Informationen zu CSS3 transform im Blog.

Live-Demo

Demo anzeigen (Sollte das Demo-Objekt die Checkbox überdecken, dann kann es auch einfach mit einem Klick auf das Demo geschlossen werden.)

Demo

Funktionen

Folgende Funktionen dienen zur leichteren Erstellung der gewünschten Transformationsmatrix. Ein Klick auf den jeweiligen Berechnen-Button wendet die Transformation direkt auf die Matrix A an. B wird anschließend zurückgesetzt. Es können beliebig viele Transformationen nacheinander auf A angewendet werden.

Werte bitte ohne Einheiten angeben! Punkt als Dezimaltrenner! (z.B. 0.5 für ½)

Translation X: Y:
Scale X: Y:
Rotation Winkel: Grad
Skew Winkel X: Grad Winkel Y: Grad

© 2010 by André Bräkling - Impressum - Zur Testlab-Übersicht - JavaScript-Funktion getTransformProperty nach zachstronaut

Alle Angaben ohne Gewähr.