CSS/Tutorials/Transform/Drehen, Kreisen und Pendeln
Text-Info
- 30min
- mittel
- 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 festleftcenterrightWert: eine Längenangabe (Standardwert ist 50%)
y-Achse: legt den Wert der Breite festtopcenterbottomWert: eine Längenangabe (Standardwert ist 50%)
z-Achse: legt den Wert der Tiefe (bei 3d-Objekten) festWert: eine Längenangabe (Standardwert ist 0)
kombinierte Transformationen animieren[Bearbeiten]
Wenn Sie mehrere Transformationen kombinieren, haben sie immer wieder das Problem, dass eine CSS-Animation einer Transformation die anderen überschreibt. Hier gibt es mehrere Lösungsansätze.
Zum einen können Sie die CSS-Animation mit allen transform-funktionen notieren, was aber schnell umständlich wird.
Zum anderen wurde die mächtige transform-Eigenschaft mit ihren vielen Funktionen durch Einzeleigenschaften ergänzt:
rotate[Bearbeiten]
Die rotate-Eigenschaft dreht die Form eines HTML-Elementes. Sie wurde im CSS Transforms Module Level 2 aus der transform-Eigenschaft herausgelöst.
- Browserunterstützung
- caniuse.com
@keyframes pulse {
from { scale: 1 }
to { scale: 1.2 }
}
svg {
rotate: .45turn;
animation: 1s infinite alternate pulse;
}
Der Pfeil erhält zwei Transformationen. Die Animation der scale-Eigenschaft läuft unabhängig von der Drehung durch rotate ab.
Alternative mit custom properties[Bearbeiten]
Das umständliche Notieren aller Transformations-Funktionen lässt sich mithilfe von custom properties vereinfachen:
transform: rotate(.45turn) scale(var(--scale, 1));
Während die rotate-Funktion einen festen Wert erhält, enthält die scale-Funktion eine var-Funktion mit einer selstdefinierten --scale-Eigenschaft. Diese wird über die @keyframes-Regel verändert:
@property --scale {
syntax: "<number>";
inherits: true;
initial-value: 1;
}
@keyframes pulse {
from { --scale: 1; scale: 1 }
to { --scale: 1.2; scale: 1.2 }
}
svg {
fill: rebeccapurple;
width: 12em;
transform: rotate(.45turn) scale(var(--scale, 1));
animation: 1s infinite alternate pulse;
}
@supports (rotate: .45turn) {
svg {
transform: none;
rotate: .45turn;
}
}
@property legt fest, dass die selbstdefinierte Eigenschaft --scale nur Zahlen enthalten darf und einen Standardwert von 1 hat.
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
xAchsewirdaside class="zentrum"entlang der X-Achse verschoben. - Das Kindelement
span class="moveY"wird mittels der Animationorbitgedreht. - 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 custom properties zu erzeugen:
- css-tricks: Simplifying CSS Cubes with Custom Properties von Ana Tudor
- drehbarer CSS-Würfel mit perspective-origin
css-tricks: perspective origin
Weblinks[Bearbeiten]
- W3C: 3d-transform-functions
- MDN: rotate3D()
- David Walsh: How to Create a CSS Cube
drehungpermanent um seine Achse gedreht. Damit alle Seiten sichtbar werden, liegt die Rotationsachse in keiner der Koordinatenebenen.