Kursusanbefaling:

CSS rotateZ() funktion

Definition og brug rotateZ() CSS

rotateZ() Funktionen definerer en 3D-rotation af et element omkring z-aksen. transform bruges i egenskabsbrug.

Tip:rotateZ(angle) Ligesom rotate(angle).

Eksempel

Eksempel 1

Brug rotateZ() Roter flere <div>-elementer om z-aksen:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Prøv det selv

Eksempel 2

Brug rotateZ() Roterer billedet om z-aksen:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Prøv det selv

CSS syntaks

rotateZ(angle)
Værdi Beskrivelse
angle

Obligatorisk. Angiv roteringsvinklen. Mulige enheder:

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

Tekniske detaljer

Version: CSS Transforms Module Level 2

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Relaterede sider

Tilføjelse:CSS 3D transformation

Reference:CSS transform egenskab

Reference:CSS rotate egenskab

Reference:CSS rotate() funktion

Reference:CSS rotate3d() funktion

Reference:CSS rotateX() funktion

Reference:CSS rotateY() funktion