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

cssselektor {
  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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(-180deg);
}

Результат:

Sien ook