[CSS] Div drehen

Drucken
( 0 Votes ) 
Hauptkategorie: Programmieren Kategorie: CSS
Erstellt am 21.01.2013 Zuletzt aktualisiert am 21.01.2013 Geschrieben von Jonny132
Mit CSS3 ist es nun Möglich Elemente wie zB ein Div um eine beliebige Anzahl an Grad zu drehen.
Somit ist nun das lästige erstellen von Bildern + Screenshots und das händische drehen des Bildes um die gewünschte Neigung obsolet. Ein weiterer Vorteil ist, dass der Benutzer den Inhalt kopieren kann.
Die rede ist von der transform:rotate - Eigenschaft.
 
Beispiel 1:
      #Beispiel1
      {
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /* für ältere IE Versionen */
        -moz-transform:rotate(45deg); /* für ältere FireFox Versionen */
        -webkit-transform:rotate(45deg); /*  für ältere Safari und Chrome Versionen */
        -o-transform:rotate(45deg); /* für ältere Opera Versionen */
        border: 1px solid;
        background-color:green;
        width: 200px;
        margin-top: 100px;
      }
    <div id="Beispiel1">
      Hier kommt der Inhalt, <br/>
      dem Sie in der gedrehten Box <br/>
      darstellen wollen. 
    </div>
Inhalt der mittels CSS um 45 Grad gedreht wurde
Im ersten Beispiel haben wir einen Wert von 45deg verwendet, was nichts weiter bedeutet, dass der Inhalt des Div um exakt 45 Grad gedreht wird.
Zu beachten ist, dass immer die Box immer in der Mitte gedreht wird. Befindet sich die Box also z.B. am oberen Rand, so kann es sein, dass der Inhalt nicht komplett angezeigt wird. Deshalt wurde in diesem Beispiel ein margin-top eingebaut.


Beispiel 2 Inhalt auf dem Kopf:
      #Beispiel2
      {
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); /* für ältere IE Versionen */
        -moz-transform:rotate(180deg); /* für ältere FireFox Versionen */
        -webkit-transform:rotate(180deg); /* für ältere Safari und Chrome Versionen */
        -o-transform:rotate(180deg); /* für ältere Opera Versionen */
        border: 1px solid;
        background-color:lightblue;
        width: 200px;
        margin-top: 100px;
      }
    <div id="Beispiel2">
      Hier kommt der Inhalt, <br/>
      dem Sie in der auf dem Kopf stehenden Box <br/>
      darstellen wollen. 
    </div>
Div das auf dem Kopf steht

Um Inhalte auf den Kopf gestellt darstellen zu lassen, kann einfach ein Wert von 180deg der transform:rotate Eigenschaft übergeben werden.
Die komplette Box wird somit um 180 Grad gedreht und steht somit auf dem Kopf.
 

    Veröffentlichen Sie ihre Kommentare ...