12. März 2011 / 9 Kommentare

[CSS3] Vom Lupeneffekt und drehenden Icons mit "transform"

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…

Verkleinern und vergrößern mit „scale“

Syntax

[css]
.box {
transform: scale(1.5);
}
[/css]

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

[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]

  • Apple Safari 5+
  • Google Chrome 10+
  • Internet Explorer 9+
  • Mozilla Firefox 3.6+
  • Opera 11.1+

Beschreibung

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.

Blockelemente drehen mit „rotate“

Syntax

[css]
.box {
transform: rotate(2deg);
}
[/css]

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

[css]
.box {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
[/css]

  • Apple Safari 5+
  • Google Chrome 10+
  • Internet Explorer 9+
  • Mozilla Firefox 3.6+
  • Opera 11.1+

Beschreibung

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:

9 Kommentare

  1. peterPan sagt:

    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]

    • Olli sagt:

      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]

  2. peterPan sagt:

    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

  3. peterPan sagt:

    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!

  4. peterPan sagt:

    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).

  5. peterPan sagt:

    ok- update.. funtkioniert auch mit nem bild als content… also ne perfekte Demo für beide Möglichkeiten…
    echt klasse von dir! thx

  6. rainer sagt:

    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 😉

Dein Kommentar zu diesem Artikel