CSS/Eigenschaften/äußere Gestaltung/Transformationen/rotate

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit transform:rotate() können Sie ein Element rotieren, d.h. drehen.

  • CSS 3.0
  • IE 10
  • Firefox
  • Chrome
  • Safari
  • Opera

Inhaltsverzeichnis

[Bearbeiten] Funktionen

Es gibt verschiedene Funktionen, die in Struktur und Syntax geringfügig abweichen:

[Bearbeiten] rotate()

Beispiel ansehen …
section:hover .eins {
  -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
  -ms-transform: rotate(-10deg);     /* IE 9 */
  transform: rotate(-10deg);
}
 
section:hover .zwei {
  transform: rotate(360deg);
}
 
section:hover .drei {
  transform: rotate(10deg);
}
 
section:hover .rotateX {
  transform: rotateX(180deg);
}
section:hover .rotateY {
  transform: rotateY(180deg);
}
 
section:hover .rotateZ {
  transform: rotateZ(180deg);
}

Mit rotate drehen Sie ein Element um ein Drehzentrum. Standardwert ist hier der Mittelpunkt des Elements, der aber mit transform-origin anders festgelegt werden kann.

transform-rotate() benötigt folgende Angaben:

Beachten Sie: Für die Winkelmaße sind sowohl positive (Drehung im Uhrzeigersinn) als auch negative Werte (Drehung gegen den Uhrzeigersinn) erlaubt.
Beachten Sie: Wenn Sie Pseudoelemente drehen wollen, müssen Sie berücksichtigen, dass diese standardmäßig inline-Elemente sind. Sie müssen also erst display:inline-block; festlegen.

[Bearbeiten] rotateX()

Mit transform: rotateX() können Sie ein Element um die x-Achse drehen. Dies entspricht: rotate3d(1, 0, 0, <Winkel>.

Die Funktion benötigt folgende Angaben:

Beachten Sie: Für das Winkelmaß sind sowohl negative als auch positive Werte erlaubt. Ein positiver Wert zeigt den Uhrzeigersinn an, ein negativer Wert den Gegenuhrzeigersinn.

[Bearbeiten] rotateY()

Mit transform: rotateY() können Sie ein Element um die Y-Achse drehen. Dies entspricht: rotate3d(0, 1, 0, <Winkel>.

Die Funktion benötigt folgende Angaben:

Beachten Sie: Für das Winkelmaß sind sowohl negative als auch positive Werte erlaubt.

[Bearbeiten] rotateZ()

Mit transform: rotateZ() können Sie ein Element um die Z-Achse drehen. Dies entspricht wieder einer Drehung um den Mittelpunkt. Dies entspricht: rotate3d(0, 0, 1, <Winkel>.

Die Funktion benötigt folgende Angaben:

Beachten Sie: Für das Winkelmaß sind sowohl negative als auch positive Werte erlaubt.

[Bearbeiten] rotate3d()

Dreidimensionales Koordinatensystem

Mit rotate3d() können Sie ein Element im dreidimensionalen Raum drehen. Das zugrundeliegende Koordinatensystem weicht von der Mathematik dahingehend ab, dass die Achsen vertauscht sind und zudem die y-Achse nach unten weist.

Beispiel
transform: rotate3d(x, y, z, Winkel);

Um ein Element drehen zu können, wird die Rotationsachse in Form eines Richtungsvektors und der Drehwinkel benötigt. Die Funktion rotate3d() erwartet deshalb folgende Angaben:

  • einen Vektor
    • x: die x-Komponente des Vektors (eine Zahl)
    • y: die y-Komponente
    • z: die z-Komponente
  • Winkel: den Drehwinkel (ein Winkelmaß)
Beispiel ansehen …
@keyframes drehung {
    0% { transform: rotate3d(1, 1, 1, 0); }
  100% { transform: rotate3d(1, 1, 1, 360deg); }		
}
.cube {
  animation: drehung 5s infinite linear;
}
In diesem Beispiel wird der durch Transformationen erzeugte Würfel durch die Animation drehung permanent um seine Achse gedreht. Damit alle Seiten sichtbar werden, liegt die Rotationsachse in keiner der Koordinatenebenen.

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Text drehen

Im folgenden Beispiel können Sie erkennen, wie mittels transform: rotate() gedrehter Text dargestellt wird:

Beispiel ansehen …
.csi {
     background:#ebe22f;
     color:black;
     font:small-caps bold 1.5em/150% Arial, sans-serif;  
     margin-top:4em;
     padding: 0 auto; 
     transform: rotate(350deg);
   }

Während um 90 Grad gedrehter Text scharf aussieht, haben die Browser Probleme, leicht gedrehte Texte scharf zu rendern.

Empfehlung: Überprüfen Sie, ob Text scharf genug dargestellt wird, wenn Sie Text mit transform:rotate() drehen wollen. Eine Vergrößerung der Zeichengröße kann hier helfen.

[Bearbeiten] Opening Crawl

Beispiel ansehen …
  .openingcrawl {
    background: black;
    color: gold;
    transform: perspective(333px) rotate3d(1,0,0,20deg);
  }
  .text {	
    animation: crawl 12s linear infinite;
  }
 
  @keyframes crawl {
      0% {transform: translate3d(0,0,0);	}
    100% {transform: translate3d(0,-40em,0);	}
  }
}
Dieses Beispiel zeigt, wie man einen „Opening Crawl“ wie im Film „Krieg der Sterne“ nur mit CSS realisiert.

Die section mit der Klasse openingcrawl wird auf der X-Achse mit rotate3d() um 20° gedreht und durch die Festlegung eines Abstands mit perspective eine räumliche Tiefe erzeugt.

Der Text wird in ein Container-Element gesteckt, dass dann in der Animation crawl mit Hilfe von translate3d() nach oben über den Bildrand verschoben wird. Durch overflow: hidden verschwindet der Text.

Diese Animation hätte auch mit dem padding von .openingcrawl erfolgen können; durch das zusätzliche Element können Sie aber die hardwarebeschleunigte Funktion translate3d() verwenden.

[Bearbeiten] Kreisen und Pendeln von Elementen

Beispiel ansehen …
#orbit aside {
  transform-origin: 100px 100px;
  animation-name: orbit;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
 
@keyframes orbit { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }	 
 
#pendel aside {
  transform-origin: center -100px;
  transform: rotate(60deg);
  animation: pendel 2s infinite alternate ease-in-out;
}
 
@keyframes pendel { to { transform: rotate(-60deg); }}

Das Zentrum ist der Dreh- und Angelpunkt, um den ein Element rotiert. Durch transform-origin kann dieses Zentrum festgelegt werden. Wenn sich das Zentrum außerhalb des Elements befindet, bewegt sich das Element auf einer kreisförmigen Umlaufbahn.

Im linken Beispiel bewegt sich #orbit aside ununterbrochen 360 Grad um das Zentrum, während die Animation bei #pendel aside bei -60 Grad wieder zurückschwingt, da animation-timing-function: alternate; eingestellt ist.

[Bearbeiten] Kreisen in einer elliptischen Bahn

Beispiel ansehen …
.zentrum {
  animation: xAchse 5s ease-in-out 0s infinite;
} 
 
@keyframes xAchse {
    0% { transform: translateX(0px);   }
   50% { transform: translateX(150px); }
  100% { transform: translateX(0px);   }
}
 
.moveY {
  animation: orbit 6s linear 0s infinite;
}
 
@keyframes orbit{
    0% { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

Das Kreisen in einer Ellipse ist schwieriger zu bewerkstelligen, da man die Position des Zentrums leider nicht direkt durch @keyframes verändern kann. Hier finden nun zwei Animationen statt:

  • In der ersten Animation xAchse wird aside class="zentrum" entlang der X-Achse verschoben.
  • Das Kindelement span class="moveY" wird mittels der Animation orbit gedreht.
  • Als Kindelement des spans befindet sich der Kreis class="ellipse", der sich nun auf einer elliptischen Umlaufbahn dreht.

[Bearbeiten] CSS-Würfel

Durch eine Kombination aus Drehungen und Verschiebungen können Sie aus sechs Quadraten die Seiten eines dreidimensionalen Würfels erzeugen:

Beispiel ansehen …
.cube-wrap {
  margin-top: 200px;	
  -webkit-perspective: 800px;
  -webkit-perspective-origin: 50% 100px;
  perspective: 800px;
  perspective-origin: 50% 100px;
}
 
.cube {
  position: relative;
  width: 200px;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(22deg) rotateY(-45deg) ;
}
 
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
  text-align: center;
  line-height: 200px;
  font-size: 1.5em;
}
 
.hinten {
  transform: translateZ(-100px) rotateY(180deg);
}
.rechts {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}
.links {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}
.oben {
  transform: rotateX(90deg) translateY(-100px);
  transform-origin: top center;
}
.unten {
  transform: rotateX(-90deg) translateY(100px);
  transform-origin: bottom center;
}
.vorne {
  transform: translateZ(100px);
}

In diesem Tutorial von David Walsh wird die Vorgehensweise genau erklärt. In einem weiteren Beispiel können Sie diesen Würfel mit farbigen Seiten in einer fortlaufenden Rotation sehen.


Achtung!

Die Eigenschaft transform ist derzeit (Stand: August 2016) noch nicht in alle aktuelle Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Android-Browser -webkit-transform

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML