Kursrekommendation:

CSS rotateX() funktion

Definition och användning rotateX() CSS

rotateX() Funktionen definierar elementets 3D-rotation runt x-axeln (horisontal riktning). transform Används i egenskapsförklaringen.

Exempel

Exempel 1

Använd rotateX() Rotera flera <div>-element runt x-axeln (horisontal riktning):

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

Prova själv

Exempel 2

Använd rotateX() Rotera bilden runt x-axeln (horisontal riktning):

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

Prova själv

CSS-syntax

rotateX(vinkel)
Värde Beskrivning
vinkel

Obligatorisk. Ange vridningsvinkeln. Möjliga enheter:

  • deg（grader）
  • rad（båggrad）
  • turn（cirkel）

Tekniska detaljer

Version: CSS Transforms Modul Nivå 2

Webbläsarstöd

Numererna i tabellen representerar den första webbläsarens version som fullständigt stöder denna funktion.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Relaterade sidor

Lär dig:CSS 3D Transformering

Referens:CSS transform egenskap

Referens:CSS rotate egenskap

Referens:CSS rotate() funktion

Referens:CSS rotate3d() funktion

Referens:CSS rotateY() funktion

Referens:CSS rotateZ() funktion