Funktionen rotateZ
Funktionen rotateZ anger rotation runt
Z-axeln i tredimensionellt utrymme. Används
tillsammans med egenskapen transform.
Värdet på egenskapen är en vinkel i någon av enheterna
för vinklar. Ett positivt värde roterar
medurs, ett negativt - moturs.
Rotationen sker runt punkten som anges av
egenskapen transform-origin.
Syntax
selector {
transform: rotateZ(vinkel);
}
Exempel
I detta exempel kommer elementet att rotera
180 grader runt Z-axeln vid hovring.
För mjuk rotation har egenskapen transition lagts till:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
Exempel
Låt oss ändra rotationsaxeln med hjälp av egenskapen
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: rotateZ(180deg);
}
:
