Funksie rotateX
Die funksie rotateX spesifiseer 'n rotasie om die
X-as in drie-dimensionele ruimte. Dit word gebruik
saam met die eienskap transform.
Die waarde van die eienskap is 'n hoek in enige hoekeenhede.
'n Positiewe waarde roteer na ons toe, 'n negatiewe - weg van ons. Rotasie vind plaas
rondom die punt wat deur die eienskap transform-origin gespesifiseer word.
Sintaksis
selektor {
transform: rotateX(hoek);
}
Voorbeeld
In hierdie voorbeeld sal die blok by wysbeweeg
180 grade om die X-as roteer. Vir vloeiende
rotasie is die eienskap transition bygevoeg:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateX(180deg);
}
:
Voorbeeld
Kom ons verander die rotasie-as met behulp van die eienskap
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);
}
:
Voorbeeld
Kom ons stel 'n negatiewe hoek in:
<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);
}
:
