Funksjonen rotateY
Funksjonen rotateY setter rotasjon rundt
Y-aksen i tredimensjonalt rom. Den brukes
sammen med egenskapen transform.
Verdien til egenskapen er en vinkel i alle vinkelenheter.
Positiv verdi roterer mot oss, negativ - bort fra oss. Rotasjonen utføres
rundt punktet som er satt av egenskapen transform-origin.
Syntaks
velger {
transform: rotateY(vinkel);
}
Eksempel
I dette eksemplet vil boksen rotere
180 grader rundt Y-aksen ved hovering.
For jevn rotasjon er egenskapen transition lagt til:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateY(180deg);
}
:
Eksempel
La oss endre rotasjonsaksen 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);
}
:
