CSS 3 Transform
CSS 3 bringt Funktionalität, die es erlaubt dynamisch (aber ohne JavaScript) HTML Elemente zu verändern. Das Schlüsselwort heisst 'transform', die darauf folgenden Funktionen können Elemente skalieren, verschieben, rotieren und kippen. Und durch das Schlüsselwort 'transition' wird es möglich, Elemente sogar zu animieren, also die sonst sprunghaften Übergänge zu verzögern.
CSS3 Browser
Die Browseranbieter haben für CSS3 Transformationen noch immer ihre spezifischen Prefixes vorangestellt, der IE unterstützt Transformationen erst ab IE9 aber noch keine 'transition'.
- -moz- für FireFox 3.5
- -webkit- für Google Chrome und Safari
- -o- für Opera
- -ms- für InternetExplorer 9
- nichts für die Zeit, ab der CSS3 von W3C als Standard freigegeben ist
CSS3 Test-Beispiel
CSS3 Transform Tutorial
Alle Funktionen transformieren alles Mögliche wie die Inhalte und Attribute der Elemente, (Text oder Bilder), den Rahmen und das Padding, Hintergrund etc. (falls nichts anderes angegeben wird).
Ein Quadrat (0) wird skalliert (1), eins wird verschoben (2), eins gedreht (3), eins gekippt (4) und eins wird alledem unterzogen (5).
HTML: <div class="quadrat transformed">5</div>
CSS:
<style type="text/css">
/* 0 das Ursprungsquadrat */
.quadrat {
width: 50px;
height:50px;
overflow: hidden;
border: 1px solid black;
background-color: rgba(51,102,51,0.5);
padding: 5px;
}
CSS 3: /* -moz-, -webkit-, -o- und -ms- werden im Folgenden nicht aufgeführt */
/* 5 */
.transformed {
transform: rotate(45deg) skew(15deg, 15deg) translate(20px,-50px) scale(0.8,1.2);
}
Skalieren
transform: scale(2, 2);
Scale heisst Grösse anpassen (skalieren).
Es wird ein Faktor angegeben, also keine Pixel, sondern der Multiplikator.
Eine positive 2 bedeutet verdoppeln, 0.5 bedeutet halbieren, es können auch zwei Stellen
nach dem Komma sein z.B. 1.05, um das Element nur um einen 20stel zu vergrössern.
Der erste Parameter skaliert wiederum in der Horizontalen (die Breite),
der zweite Parameter in der Vertikalen (die Höhe).
/* 1 */
.scaled {
transform: scale(2, 2);
}
Verschieben
transform: translate(20px,-50px);
Translate meint verschieben.
Der erste Parameter der Funktion zeigt in die Horizontale,
eine positive Zahl schiebt das Element nach rechts, eine negative Zahl schiebt nach links.
Der zweite Parameter zeigt in die Vertikale, eine negative Zahl schiebt das Element nach oben,
eine positive Zahl nach unten.
Ich soll Pixel oder em angeben, aber keine Prozente.
/* 2 */
.translated {
transform: translate(40px,90px);
}
Drehen
transform: rotate(45deg)
Rotate heisst drehen.
Es wird nur einen Parameter erwartet, eine negative Zahl dreht gegen den Uhrzeigersinn,
eine positive Zahl dreht wie der Uhrzeiger.
Als Sorte wird Grad angegeben in der Abkürzun deg (von degree).
/* 3 */
.rotated {
transform: rotate(45deg);
}
Neigen
transform: skew(15deg, 15deg);
Skew heisst neigen.
Als erster Parameter wird der Winkelgrad in der Horizontalen angegeben, ausgehend von der oberen linken Ecke.
Der Effekt ist, als nehme man die beiden unteren Ecken und ziehe sie nach rechts (bei einer positiven Zahl),
so dass ein Drachen (Parallelogramm, Rhomboid, Raute) entsteht, welcher sich nach links neigt.
Bei einer negativen Zahl werden die beiden unteren Ecken nach links gezogen,
also neigt sich das Element nach rechts (zugleich wird das ganze Element nach rechts verschoben,
so dass die linke untere Ecke wieder auf dem Nullpunkt steht, als hätte man
eigentlich die oberen Ecken nach rechts gezogen).
Als zweiter Parameter wird der Winkel in der Vertikalen angegeben,
eine positive Zahl drückt die rechte Seite nach unten, eine negative Zahl zieht
die rechte Seite nach oben (und justiert das ganze Element wieder etwas nach unten).
Als Sorte werden auch Grade angegeben, wiederum als deg abgekürzt.
/* 4 */
.skewed {
transform: skew(15deg, 15deg);
}
Übergang
transition: all 3s ease-in;
Und nun kommt der Übergang (die Transition) zum Zustand der Transformation. Damit lassen sich schon recht komplexe Animationen erzeugen ganz ohne JavaScript. Die Transition wird z.B. beim Hovern ausgelöst (der Übergang kann ja nicht nach der Transformation stattfinden). Falls der Mauszeiger das Element mit der Klasse verlässt (z.B. weil das Element verschoben wird), ist der Hover-Zustand nicht mehr gegeben, der Übergangseffekt wird unterbrochen und das transformierte Element wird zurückgesetzt.
Transition funktionieren in den Browsern vorerst nur mit ihren proprietären Prefixes (IE gar nicht).
/* 6 */
.transitioned:hover {
transform: rotate(45deg) skew(15deg, 15deg) translate(100px,-100px) scale(5, 5);
transition: all 3s ease-in-out;
}
Die Kurzform 'transition' kann aufgeteilt werden in:
- transition-property: all; (Eigenschaft die animiert werden soll, Beschränkung möglich z.B. auf font-size, background-color, opacity, width, hight, ...)
- transition-duration: 3s; (Gesamtdauer in Sekunden. Dezimalzahlen sind möglich: 0.2s)
- transition-timing-function: ease-in-out; (natütlich anmutende Animation, Beginn und/oder Ende verlaufen langsamer. Es gibt ease, ease-in, ease-out, ease-in-aut, steps und cubic-bezier, ...)
- transition-delay: 0s; (Verzögerung vom Auslöser bis zum Start in Sekunden)
Weitere Neuerungen durch CSS 3
Ein paar weitere Suplements gibts auf der Seite: css3.php .
Check den Code.