Funksjonen rotate3d

Funksjonen rotate3d setter rotasjon av elementet på en gitt vinkel samtidig relativt til X-, Y- og Z-aksen i tredimensjonalt rom. Brukes sammen med egenskapen transform. Verdien til egenskapen er en vinkel i noen enheter for vinkler.

Som verdier tar funksjonen 4 parametere, skrevet med komma mellom. De første tre parameterne bestemmer aksens vektor i tredimensjonalt rom, relativt til hvilken rotasjonen vil bli utført. Den fjerde parameteren setter rotasjonsvinkelen.

Syntaks

cssvelger {
  transform: rotate3d(X, Y, Z, vinkel);
}

Eksempel

I dette eksemplet vil aksens vektor være rettet til høyre øvre hjørne av skjermen:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Se også