CSS/Tutorials/Transform/Drehen, Kreisen und Pendeln

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Transform(Weitergeleitet von Transform:rotate)
Wechseln zu: Navigation, Suche
← Verschieben, Skalieren,
Strecken und Stauchen
CSS-Transform
(Übersicht)
3D-Transforms →

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS


Mit der rotate()-Funktion können Sie ein Element rotieren, d. h. drehen. Standardmäßig ist der Drehpunkt die Mitte des Elements – dies kann mit transform-origin aber auch individuell festgelegt werden, um z.B einen Kreisumlauf oder eine Pendelbewegung zu realisieren.

rotate()[Bearbeiten]

Mit der rotate()-Funktion können Sie ein Element rotieren, d. h. drehen.

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

Die Funktion enthält nur einen Parameter, das Winkelmaß der Drehung.

Plattenspieler ansehen …
@keyframes rotating {
  0%  { transform: rotate(0);}
  100%{ transform: rotate(1turn);}
}
.disc { 
  animation: rotating 4s linear infinite;
}
ansehen …


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.

rotate3d()[Bearbeiten]

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.
ansehen …

rotateX, rotateY und rotateZ[Bearbeiten]

Eine Rotation kann um jede der 3 Achsen erfolgen:

  • transform: rotateX() dreht ein Element um die x-Achse. Dies entspricht: rotate3d(1, 0, 0, <Winkel>.
  • transform: rotateY()dreht ein Element um die Y-Achse. Dies entspricht: rotate3d(0, 1, 0, <Winkel>.
  • transform: rotateZ() dreht ein Element um die Z-Achse . Dies entspricht wieder einer Drehung um den Mittelpunkt. Dies entspricht: rotate3d(0, 0, 1, <Winkel>.
Beispiel ansehen …
section:hover .eins {
  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);
}
ansehen …

transform-origin[Bearbeiten]

Mit der Eigenschaft transform-origin können Sie ein Zentrum oder einen Dreh- und Angelpunkt für transform: rotate() festlegen, um den das Element dann gedreht wird.

  • CSS 3.0
  • IE 10
  • Firefox
  • Chrome
  • Safari
  • Opera
verschiedene Drehpunkte ansehen …
aside {
   animation: orbit 4s linear infinite;	
}
	
#rotate2 aside {
  background: #c32e04;
  transform-origin: 0 0;
}
 
#rotate3 aside {
  background: #dfac20;	
  transform-origin: center 100%;
}
ansehen …

Wenn ein Zentrum außerhalb des Elements liegt, rotiert dieses Element auf einer kreisförmigen Umlaufbahn um dieses Zentrum.

Folgende Angaben sind möglich:

  • x-Achse: legt den Wert der Höhe fest
    • left
    • center
    • right
    • Wert: eine Längenangabe (Standardwert ist 50%)
  • y-Achse: legt den Wert der Breite fest
    • top
    • center
    • bottom
    • Wert: eine Längenangabe (Standardwert ist 50%)
  • z-Achse: legt den Wert der Tiefe (bei 3d-Objekten) fest

Anwendungsbeispiele[Bearbeiten]

Text drehen[Bearbeiten]

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);
   }
ansehen …

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.

Opening Crawl[Bearbeiten]

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.
ansehen …

Kreisen und Pendeln von Elementen[Bearbeiten]

Beispiel ansehen …
#orbit aside {
  transform-origin: 100px 100px;
  animation: orbit 4s linear 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); }}
ansehen …

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.

Kreisen in einer elliptischen Bahn[Bearbeiten]

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); }
}
ansehen …

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.
Empfehlung: Einfacher wäre hier das Festlegen eines elliptischen Pfades mit offset-path, dem das Element dann animiert folgt.

CSS-Würfel[Bearbeiten]

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;	
  perspective: 800px;
  perspective-origin: 50% 100px;
}

.cube {
  position: relative;
  width: 200px;
  margin: 0 auto;
  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);
}
ansehen …

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.

Einfacher ist es den Würfel mithilfe von CSS Custom Properties zu erzeugen:


← erschieben, Skalieren,
Strecken und Stauchen
CSS-Transform
(Übersicht)
3D-Transforms →

Weblinks[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Transform/Drehen,_Kreisen_und_Pendeln&oldid=80589“