CSS/Tutorials/Transform/Drehen, Kreisen und Pendeln
Informationen zu diesem Text
- 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.
Inhaltsverzeichnis
rotate()[Bearbeiten]
Mit der rotate()-Funktion können Sie ein Element rotieren, d. h. drehen.
Die Funktion enthält nur einen Parameter, das Winkelmaß der Drehung.
@keyframes rotating {
0% { transform: rotate(0);}
100%{ transform: rotate(1turn);}
}
.disc {
animation: rotating 4s linear infinite;
}
display:inline-block;
festlegen.rotate3d()[Bearbeiten]
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.
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ß)
@keyframes drehung {
0% { transform: rotate3d(1, 1, 1, 0); }
100% { transform: rotate3d(1, 1, 1, 360deg); }
}
.cube {
animation: drehung 5s infinite linear;
}
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>
.
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);
}
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.
aside {
animation: orbit 4s linear infinite;
}
#rotate2 aside {
background: #c32e04;
transform-origin: 0 0;
}
#rotate3 aside {
background: #dfac20;
transform-origin: center 100%;
}
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 festleft
center
right
Wert
: eine Längenangabe (Standardwert ist 50%)
y-Achse
: legt den Wert der Breite festtop
center
bottom
Wert
: eine Längenangabe (Standardwert ist 50%)
z-Achse
: legt den Wert der Tiefe (bei 3d-Objekten) festWert
: eine Längenangabe (Standardwert ist 0)
Anwendungsbeispiele[Bearbeiten]
Text drehen[Bearbeiten]
Im folgenden Beispiel können Sie erkennen, wie mittels transform: rotate()
gedrehter Text dargestellt wird:
.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.
transform:rotate()
drehen wollen. Eine Vergrößerung der Zeichengröße kann hier helfen.Opening Crawl[Bearbeiten]
.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); }
}
}
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.
.openingcrawl
erfolgen können; durch das zusätzliche Element können Sie aber die hardwarebeschleunigte Funktion translate3d()
verwenden.Kreisen und Pendeln von Elementen[Bearbeiten]
#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); }}
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]
.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
wirdaside class="zentrum"
entlang der X-Achse verschoben. - Das Kindelement
span class="moveY"
wird mittels der Animationorbit
gedreht. - Als Kindelement des spans befindet sich der Kreis
class="ellipse"
, der sich nun auf einer elliptischen Umlaufbahn dreht.
CSS-Würfel[Bearbeiten]
Durch eine Kombination aus Drehungen und Verschiebungen können Sie aus sechs Quadraten die Seiten eines dreidimensionalen Würfels erzeugen:
.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);
}
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:
- css-tricks: Simplifying CSS Cubes with Custom Properties von Ana Tudor
Weblinks[Bearbeiten]
- W3C: 3d-transform-functions
- MDN: rotate3D()
- David Walsh: How to Create a CSS Cube
drehung
permanent um seine Achse gedreht. Damit alle Seiten sichtbar werden, liegt die Rotationsachse in keiner der Koordinatenebenen.