Kursrekommendation:

CSS rotateY() funktion

Definition och användning rotateY() CSS

rotateY() Funktionen definierar elementets 3D-rotation runt y-axeln (vertikal riktning). transform Används i egenskapsförklaringar.

Exempel

Exempel 1

Använd rotateY() Rotera flera <div>-element runt y-axeln (vertikal riktning):

#myDiv1 {
  transform: rotateY(40deg);
}
#myDiv2 {
  transform: rotateY(60deg);
}
#myDiv3 {
  transform: rotateY(80deg);
}

Prova själv

Exempel 2

Använd rotateY() Rotera bilden runt y-axeln (vertikal riktning):

#img1 {
  transform: rotateY(40deg);
}
#img2 {
  transform: rotateY(60deg);
}
#img3 {
  transform: rotateY(80deg);
}

Prova själv

CSS Syntax

rotateY(vinkel)
Värde Beskrivning
vinkel

Obligatorisk. Ange rotationsvinkeln. Möjliga enheter:

  • deg（grader）
  • rad（radie）
  • turn（cirkel）

Tekniska detaljer

Version: CSS Transforms Modul Nivå 2

Webbläsarstöd

Numrerna i tabellen representerar den första webbläsarversionen som fullständigt stöder denna funktion.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Relaterade sidor

Lär digCSS 3D Transformering

Referens:CSS transform egenskap

Referens:CSS rotate egenskap

Referens:CSS rotate() funktion

Referens:CSS rotate3d() funktion

Referens:CSS rotateX() funktion

Referens:CSS rotateZ() funktion