Entwicklung & Design

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

Dank CSS3 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: 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="https://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:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

2 Kommentare
Simon Sprankel

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

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.