Funktionen rotateY
Funktionen rotateY anger en rotation runt
Y-axeln i tredimensionellt utrymme. Används
tillsammans med egenskapen transform.
Värdet på egenskapen är en vinkel i valfri vinkelenhet.
Ett positivt värde roterar mot oss, ett negativt - från oss.
Rotationen sker runt punkten som anges av egenskapen transform-origin.
Syntax
selector {
transform: rotateY(vinkel);
}
Exempel
I detta exempel kommer elementet att rotera
180 grader runt Y-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: rotateY(180deg);
}
:
Exempel
Låt oss ändra rotationsaxeln med egenskapen transform-origin:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
