CSS rotateX() Function

Definition and Usage

CSS rotateX() Function defines the 3D rotation of the element around the x-axis (horizontal direction).

rotateX() Function in transform Used in the attribute.

Instance

Example 1

Using rotateX() Rotate multiple <div> elements around the x-axis (horizontal direction):

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

Try It Yourself

Example 2

Using rotateX() Rotate image around the x-axis (horizontal direction):

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

Try It Yourself

CSS Grammar

rotateX(angle)
Value Description
angle

Dauka. Ƙirƙirar ƙanam:

  • deg（degrees）
  • rad（radians）
  • turn（circle）

Ƙarfin ƙarfi

Tirar: CSS Transforms Module Level 2

Rarrabawar browsers

Iyali na browsers na farko suka ɗauka ƙirƙirar ƙanam

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Ƙarɗa na yancin

Ƙarɗa:CSS 3D Ƙarɗa

Hausa reference:Hausa transform hanyan

Hausa reference:ໂຊຊີບສຽງ rotate

Hausa reference:Hausa CSS rotate() hanyan

Hausa reference:Hausa CSS rotate3d() hanyan

Hausa reference:Hausa CSS rotateY() hanyan

Hausa reference:Hausa CSS rotateZ() hanyan