Funktion rotate
Die Funktion rotate() bewirkt eine Drehung eines Elements
um einen bestimmten Winkel. Sie wird in Verbindung mit
der Eigenschaft transform verwendet.
Als Wert dient ein Winkel in beliebigen Winkeleinheiten. Ein positiver Wert dreht
im Uhrzeigersinn, ein negativer - gegen den Uhrzeigersinn.
Die Drehung erfolgt um den Punkt, der durch die
Eigenschaft transform-origin festgelegt wird.
Syntax
Selektor {
transform: rotate(Winkel);
}
Beispiel
In diesem Beispiel ist das Blockelement um 30
Grad im Uhrzeigersinn gedreht:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Beispiel
In diesem Beispiel ist das Blockelement um 30
Grad gegen den Uhrzeigersinn gedreht:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Beispiel
In diesem Beispiel dreht sich das Blockelement bei Überfahren mit der Maus
um 1 Umdrehung, da der Drehwert in
1turn angegeben ist (den gleichen Effekt erzielt man,
wenn der Drehwinkel mit 360deg angegeben wird). Für
eine flüssige Drehung wurde die Eigenschaft
transition hinzugefügt:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
