Mit CSS3 haben wir die Möglichkeit, Objekte zu drehen. Wie das funktioniert möchte ich euch in diesem Artikel erklären.

Objekte drehen mit CSS

Manchmal möchten wir auf einer Website bestimmte Texte, Fotos, oder sonstige Grafiken drehen. Lange musste man sich dafür Grafiken erstellen, die man daraufhin eingebunden hat. Mit CSS3 gibt es heute eine viel sinnvollere Variante, mit der sich zudem auch Speicherplatz sparen lässt. Im Grunde benötigen wir dafür nur eine Eigenschaft: transform:rotate

Ausgangsbild

iconpfeil

 

Dieses Symbol möchten wir nun um 180Grad drehen, so dass der Pfeil nach links zeigt.

CSS-Code

-moz-transform:rotate(180deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari */
-o-transform:rotate(180deg); /* Opera */
-ms-transform:rotate(180deg); /* IE9 */
transform:rotate(180deg); /* W3C */

Die verschiedenen Angaben stehen für die Kompabilität mit den verschiedenen Browsern.

Ergebnis

iconpfeil

 

So einfach ist es, in CSS Objekte zu drehen. Alternativ müsste man, wie oben beschrieben, für unterschiedliche Richtungen verschiedene Grafiken erstellen. Die Vorteile sind eindeutig:

  • Es wird nur eine Grafik benötigt, die beliebig gedreht werden kann. Dadurch spart man Speicherplatz
  • Änderungen können schneller durchgeführt werden. Es reicht nur eine Ergänzung im CSS-Code

 

In dem Sinne, bis zum nächsten Artikel!

 

Smalltalk-Ecke

Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)


  1. Kai sagt:

    funzt nicht mit dem safari Version 9.1 (11601.5.17.1)

    1. Daniele sagt:

      Vielen Dank, ist gefixt und sollte nun auch im Safari funktionieren 🙂

  2. Reiner sagt:

    Klasse, genau das habe ich gesucht. Einfach und präzise erklärt.
    Baue gerade für einen guten Freund eine Website mit ein bisschen Brimborium.
    Danke.

    1. Daniele sagt:

      Hallo Reiner,

      sehr gerne! Freut mich, wenn ich helfen konnte!

  3. Eumel sagt:

    Ja, und weiter ? Was kann ich damit als Laie nun anfangen ?

    Außerdem will ich das(ein) Bild nicht um 180° drehen, sondern nur einfach drehen …

    Warum gibt es kein Add-on wie bei Firefox dafür ?

    Das Leben kann so einfach sein …

    1. Daniele sagt:

      Guten Tag,

      ich denke Du hast den Artikel schlichtweg falsch verstanden. Hier geht es um Möglichkeiten, die CSS3 bietet.

      „CSS“, übersetzt „Cascading Style Sheets“, ist eine deklarative Sprache für Stilvorlagen von Websites und wird für die Webprogrammierung eingesetzt. (Wobei „Programmierung“ hier falsch ist, da CSS keine Programmiersprache in dem Sinne ist.)

      Es geht hier nicht darum, im Livemodus Objekte im Browser drehen zu können.

      Viele Grüße,
      Daniele

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Werde Teil unserer Community

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.