Funkcja CSS rotateX()

Definicja i użycie

CSS rotateX() Definiuje 3D obrót elementu wokół osi x (poziomego kierunku).

rotateX() Funkcja w transform w użyciu atrybutu.

Przykład

Przykład 1

Użyj rotateX() Obracaj kilka elementów <div> wokół osi x (poziomego kierunku):

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

Spróbuj sam

Przykład 2

Użyj rotateX() Obracaj obraz wokół osi x (poziomego kierunku):

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

Spróbuj sam

CSS Syntax

rotateX(kąt)
Wartość Opis
kąt

Wymagane. Określ kąt obrotu. Możliwe jednostki:

  • deg（stopnie）
  • rad（radiany）
  • turn（obrót）

Szczegóły techniczne

Wersja: CSS Transforms Module Level 2

Wsparcie przeglądarek

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni wspierają tę funkcję.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Strony związane

Tutorial:CSS 3D Transformaty

Zwiazki:Atrybut transform w CSS

Zwiazki:Atrybut rotate w CSS

Zwiazki:Funkcja rotate() w CSS

Zwiazki:Funkcja rotate3d() w CSS

Zwiazki:Funkcja rotateY() w CSS

Zwiazki:Funkcja rotateZ() w CSS