Vorheriger Artikel Nächster Artikel

CSS3: Bildübergänge mit 3D-Rollover-Effekten

Dank lassen sich viele interessante Effekte und vor allem Animationen mit sehr geringem Aufwand erstellen. Selbst einfache 3D-Überblendungen – zum Beispiel für Rollover-Effekte – können mit einigen Zeilen CSS3 schnell und einfach realisiert werden.

CSS3: Bildübergänge mit 3D-Rollover-Effekten
CSS3: 3D-Rollover für Bilder
CSS3: 3D-Rollover für Bilder

Animationen waren vor CSS3 aufwändig zu realisieren, wenn man sie ohne Flash erstellen wollte. Selbst einfache Bewegungen mussten mit JavaScript programmiert werden.

Die neuen 3D- und Animationseigenschaften von CSS3 machen es möglich, mit wenigen Zeilen solche Effekte zu realisieren. Und performanter als programmierte JavaScript-Animationen sind sie auch noch.

CSS3 und Bild-Rollover

Im folgenden Beispiel soll sich ein Bild per Rollover in den Hintergrund drehen und ein anderes Bild in den Vordergrund. Das Ganze wird verbunden mit einem Link, der auf eine beliebige Website verweisen soll. Die Grundlage dafür bilden zunächst einige Zeilen HTML, die anschließend per CSS3 in Bewegung gebracht werden:

<a class="effekt" href="http://t3n.de/">
  <div>
    <img src="logo.png" width="200" height="200" />
    <img src="website.png" width="200" height="200" />
  </div>
</a>

Für den Rollover wird zunächst ein Link mit der Klasse „effekt“ erstellt. Darin wird ein DIV-Element platziert. Dieses DIV-Element beinhaltet die beiden Bildgrafiken, zwischen denen per Rollover in Form einer kleinen 3D-Animationen gewechselt werden soll.

Im nächsten Schritt wird per CSS die Grundeinstellung für den Effekt definiert.

.effekt {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
}

.effekt img:nth-child(1) {
  z-index: 2;
  position: absolute;
}

.effekt img:nth-child(2) {
  z-index: 1;
  position: absolute;
}

.effekt:hover img:nth-child(2) {
  z-index: 2;
}

.effekt:hover img:nth-child(1) {
   z-index: 1;
}

Für den gesamten Link wird eine feste Größe festgelegt. Außerdem werden die beiden Bilder hintereinander platziert. Über die Pseudoklasse „:hover“ wird die Position der beiden Bilder getauscht, sodass das hintere Bild beim Darüberfahren mit der Maus in den Vordergrund rückt.

Auf diese Art ist die Grundfunktion für den Rollover bereits realisiert. Es fehlt nur noch die 3D-Animation.

CSS3 und 3D-Animation

Die 3D-Animation wird über verschiedene CSS3-Eigenschaften definiert:

.effekt {
  perspective: 800px;
}

.effekt div {
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
  transition: 1s;
}

Dem gesamten Link wird zunächst per „perspective“ eine Perspektive von 800 Pixeln hinzugefügt. Dies sorgt dafür, dass die Animation räumlich dargestellt wird.

Dem DIV-Element, welches die beiden Bilder umschließt, werden dieselben Maße zugewiesen wie dem Link. So wird sichergestellt, dass die Animation innerhalb dieser Angaben abläuft. Über „transform-style“ wird festgelegt, dass das Element nicht nur über die X- und Y-Achse, sondern auch über die Z-Achse (also dreidimensional) animiert werden soll. Außerdem wird per „transition“ die Dauer der Animation (hier eine Sekunde) festgelegt.

Im nächsten Schritt muss die Ausgangssituation der beiden Bilder definiert werden:

.effekt img:nth-child(1) {
  transform: translate3d(0, 0, 100px) scale(0.75, 0.75);
}

.effekt img:nth-child(2) {
  transform: rotateY(180deg) translate3d(0, 0, 100px) scale(0.75, 0.75);
}

Die beiden Bilder werden über „img:nth-child(1)“ und „img:nth-child(2)“ angesprochen. Über die Eigenschaft „transform“ werden die Bilder pespektivisch verschoben („translate3d“), skaliert („scale“) und gedreht („rotateY“). Das erste Bild wird perspektivisch um 100 Pixel auf der Z-Achse verschoben sowie auf 75 Prozent skaliert. Das zweite Bild wird um 180 Grad auf der Y-Ache gedreht und ebenfalls um 100 Pixel auf der Z-Achse verschoben und auf 75 Prozent skaliert.

Im letzten Schritt wird per „:hover“ das DIV-Element, das die beiden Bilder umschließt, um 180 Grad gedreht:

.effekt:hover div {
  transform: rotateY(180deg);
}

Der letzte Schritt sorgt dafür, dass beim Darüberfahren mit der Maus die Drehung stattfindet. Die vorher getätigten Schritte sorgen dafür, dass aus der Drehung eine dreidemensionale Drehung wird.

Wer ein wenig mit den Einstellungen spielt, kann die Animation schnell verändern und andere Effekte erzielen. Die CSS-Eigenschaften „transform“, „transform-style“ und „perspective“ benötigen die jeweiligen Vendor-Präfixe der Browser.

Eine Demo des Beispiels gibt es auf JsFiddle.

Was haltet ihr von den neuen CSS3-Eigenschaften für Animationen und 3D?

Weiterführende Links zum Thema CSS3:

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Simon Sprankel am 28.02.2012 (10:32 Uhr)

    Ein div innerhalb eines a Tags ist nicht wirklich standard-konform, deshalb hier mal ein Update mit einem span und zusätzlichem display: block: http://jsfiddle.net/2Uakw/68/

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
Kinderleicht zu CSS3-Animationen mit diesem Stylesheet
Kinderleicht zu CSS3-Animationen mit diesem Stylesheet

Mit dem CSS3 Animations Cheat Sheet, gibt es ein praktisches Stylesheet, mit dessen Hilfe ihr ohne großen Aufwand Seitenelemente animieren könnt. » weiterlesen

Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

CSS3: Coole Animationen für im Grid angeordnete Bilder
CSS3: Coole Animationen für im Grid angeordnete Bilder

Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen