CSS3 setzt sich langsam aber sicher durch. Alle neuen Versionen der wichtigen Browser bieten – mehr oder weniger – Unterstützung für die neuen Funktionen. Es gibt sehr viele schöne und nützliche Dinge, die mit CSS3 Einzug halten. Ich habe da mal was zum Thema „transform“ vorbereitet…
[css]
.box {
transform: scale(1.5);
}
[/css]
Kürzer geht’s nicht.
[css]
.box {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
[/css]
Mittels transform
und scale
lassen sich Blockelemente skalieren. Die Skalierung wird ausgehend vom Faktor 1 angegeben. Einfaches Beispiel: ein Element mit 300 x 100 Pixeln (oben) wird auf den Faktor 1,5 vergrößert (Mitte) sowie auf Faktor 0,5 verkleinert (unten)
Der Befehl dazu:
[css]
.box {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
[/css]
bzw.
[css]
.box {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
[/css]
Sofern nur ein Wert angegeben ist, werden die X- und die Y-Achse gleichermaßen skaliert. Es können aber auch unterschiedliche Werte, durch Komma getrennt, angegeben werden:
[css]
.box {
transform: scale(2,4);
}
[/css]
Soll gezielt nur eine Achse skaliert werden, kann mit scaleX
oder scaleY
der entsprechende Wert gesetzt werden.
Findet ihr langweilig?
Wie wär’s mit Bildern, die bei :hover
vergrößert werden? So eine Art Lupeneffekt. Mit dem folgenden Code skaliert ihr Bilder um den Faktor 1,5 bei :hover
. Verlasst ihr das Bild mit der Maus, wird die ursprüngliche Größe wiederhergestellt.
[css]
img {
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
-ms-transition: -ms-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
[/css]
Der Befehl transition
ist für die animierte fließende Vergrößerung zuständig, indem die Skalierung über eine Zeitspanne (hier 0,4 Sekunden) erfolgt.
Beim Skalieren gilt es jedoch zu beachten, dass die Bilder aufgezoomt werden. Je höher die Skalierung, desto pixeliger wird das Bild.
Weitere Beispiele dazu findet ihr auf der Demoseite.
[css]
.box {
transform: rotate(2deg);
}
[/css]
Kürzer geht’s nicht.
[css]
.box {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
[/css]
Mit transform
und rotate
dreht ihr Blockelemente. Die Drehung wird dabei, wie sollte es auch anders sein, in Grad angegeben. Positive Werte drehen das Element nach rechts, negative Werte nach links. Im obigen Beispiel drehen wir ein Element um 2 Grad im Uhrzeigersinn:
Das sieht dann etwa so aus:
Ein nettes Beispiel für diesen Effekt hab ich noch. Im Zusammenspiel mit transition
lassen sich wunderschöne Dinge zaubern. So beispielsweise Bilder, die sich einmal um sich selbst drehen:
[css]
img {
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-o-transition: -o-transform 1s ease-out;
-ms-transition: -ms-transform 1s ease-out;
transition: transform 1s ease-out;
}
img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
} [/css]
Hier wird das Bild innerhalb von 1 Sekunde um 360 Grad gedreht. Live-Beispiel und mehr dazu auf der Demo-Seite:
Leider bietet der Internet Explorer in Version 9 keine Unterstützung für transition
. Daher ist auch keine Darstellung einer 360 Grad-Drehung möglich.
Vielleicht für den ein oder anderen ganz interessant: diese Übersicht listet auf, welcher Browser in welcher Version Unterstützung für CSS3 und HTML5 bietet.
Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:
Du musst angemeldet sein, um einen Kommentar abzugeben.
9 Kommentare
Ich finde die Anleitung ganz gut und hab es auch versucht nachzubilden was mir aber nur teilweise gelingt.
Ich hab nen a-tag, der um ein img tag herum liegt und wollte damit auch eine lupengrafik einfliegen lassen, dies gelingt mir aber nicht, woran liegt das?
[code]<a href="image.jpg" rel="nofollow"></a>[/code]
Du willst ein Bild mit Link einbinden und dieses bei :hover vergrößern, richtig? Probiers mal so:
HTML
[html]<a class="lupe" href="#"><img src="image.jpg">Hier geht’s weiter</a>[/html]
CSS
[css].lupe img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.lupe img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}[/css]
Hallo Olli,
danke für das schnelle Feedback, dein Beispiel vergrößert jedoch nur das eigentliche Bild selbst. Warscheinlich hab ich mich zu undeutlich ausgedrückt bei ersten anlauf.
Ich hab ein normales Bild das von einem Link umgeben ist. Wenn man mit der Maus über das Bild fährt, soll eine Lupengrafik über das bild einlaufen, um aufzuzeigen, dass man dieses Bild in einer lightbox gross betrachten kann.
Das Lupenbild ist demnach eine extra grafik, über der eigntlichen Grafik. Ähnlich wie es bei deinem Demo-Buttons gemacht wird. Das Problem bisher ist, dass die Lupengrafik unter dem Bild dargestellt wird und auch ein z-index mich da bisher nicht weitergebracht hat.
Hier ein Link, der mein Vorhaben verdeutlicht: (Maus über die Bilder bewegen)
http://livedemo00.template-help.com/wordpress_36698/portfolio/
viele Grüße, PeterPan
Okay. Dann hab ich dich missverstanden. Hast du einen Link zu deinem Projekt? Oder poste hier mal den Code.
Gruß Olli
ich hab nun noch mal ganz von vorn begonnen. unter http://jsfiddle.net/vVUuU/
aber ich hab da wohl noch nen denkfehler
im grund möcht ich genau das erreichen, dass du mit deinem Demo buttons machst.. allerdings mit einem Bild und einer Lupe darüber.
gehe ich deinem Beispiel nach, geht die lupe aber hinter das bild.. um die lupe zu sehen.. muss sie natürlich vor dem bild liegen.
vielleich tkannst du ja mal bei ein wenig zeit ne Demo hochziehen.. wäre echt klasse!
Bitte sehr. Nur für dich: Transition-Lupe-Demo
Gruß Olli
Hallo Olli,
wow, dankeschön! Ich werd mal schauen, ob ich das ganze umgesetzt bekomme. Hab nämlich schon gesehen, dass dein Hauptbild als Hintergrundgrafik eingefügt ist, was selten der Fall ist in Contentbereichen (bg-bilder sind es ja in der Regel nur in layoutbereichen), meist ist es ja ein Container, der ein Bildelement beinhaltet. Und ich glaube genau darin liegt die grosse schwierigkeit (zumindest für mich).
ok- update.. funtkioniert auch mit nem bild als content… also ne perfekte Demo für beide Möglichkeiten…
echt klasse von dir! thx
Hi
Super Beitrag.
Würde aber in dem Artikel erwähnen das es Klug wäre die Bilder, die vergrößert werden bei Hover, im Html runter zu skalieren und auf Originalgröße „hovern“ zu lassen um unschöne „pixeleffekte“ zu vermeiden.
bsp: ein bild soll von 100X100 x 2 „gehovert werden, scale x2 sollte das bild original 200×200 sein, per CSS oder Html aber 100×100 eingebunden werden.
Runterskalieren geht immer schöner als rauf..
lg rainer
ps. super seite übrigens, hab mir einige beiträge als Anregung bzw, als copy and paste zum weiter verwenden und verfeinern, geholt 😉