Functie rotateY

De functie rotateY specificeert een rotatie rond de Y-as in de driedimensionale ruimte. Wordt gebruikt in combinatie met de eigenschap transform. De waarde is een hoek in elke hoekeenheid. Een positieve waarde draait naar ons toe, een negatieve waarde - van ons af. De rotatie vindt plaats rond het punt dat wordt gespecificeerd door de eigenschap transform-origin.

Syntaxis

cssselector {
  transform: rotateY(hoek);
}

Voorbeeld

In dit voorbeeld zal het blok bij hover 180 graden draaien rond de Y-as. Voor vloeiende rotatie is de eigenschap transition toegevoegd:

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

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

Результат:

Voorbeeld

Laten we de rotatie-as veranderen met de eigenschap 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: right center;
}
#elem:hover {
  transform: rotateY(180deg);
}

Результат:

Zie ook