Funktion rotateX
Die Funktion rotateX definiert eine Drehung um die
X-Achse im dreidimensionalen Raum. Wird
zusammen mit der Eigenschaft transform verwendet.
Als Wert dient ein Winkel in beliebigen Winkeleinheiten. Ein positiver Wert dreht das Element
zu uns, ein negativer von uns weg. Die Drehung erfolgt
um den Punkt, der durch die Eigenschaft transform-origin festgelegt wird.
Syntax
Selektor {
transform: rotateX(Winkel);
}
Beispiel
In diesem Beispiel dreht sich der Block bei Mouseover um
180 Grad um die X-Achse. 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: rotateX(180deg);
}
:
Beispiel
Wir ändern die Drehachse mit der Eigenschaft
transform-origin:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(180deg);
}
:
Beispiel
Wir setzen einen negativen Winkel:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(-180deg);
}
:
