Funksjonen rotateX
Funksjonen rotateX angir en rotasjon rundt
X-aksen i tredimensjonalt rom. Den brukes
sammen med egenskapen transform.
Verdien til egenskapen er en vinkel i alle vinkelenheter.
En positiv verdi roterer
mot oss, en negativ - bort fra oss. Rotasjonen utføres
rundt punktet angitt av egenskapen transform-origin.
Syntaks
velger {
transform: rotateX(vinkel);
}
Eksempel
I dette eksemplet vil boksen rotere
180 grader rundt X-aksen ved hover.
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: rotateX(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: center bottom;
}
#elem:hover {
transform: rotateX(180deg);
}
:
Eksempel
La oss angi en negativ vinkel:
<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);
}
:
