rotateY-funksie
Die funksie rotateY spesifiseer 'n rotasie om die
Y-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 draai na ons toe, 'n negatiewe waarde - van ons af. Die rotasie word uitgevoer
om die punt gespesifiseer deur die eienskap transform-origin.
Sintaksis
selektor {
transform: rotateY(hoek);
}
Voorbeeld
In hierdie voorbeeld sal die blok om die Y-as draai
met 180 grade wanneer daar daaroor gehover word. 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: rotateY(180deg);
}
:
Voorbeeld
Laat ons die rotasie-as verander met 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: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
