Rekomendasyon ng Kurso:

CSS rotate3d() function

Paglalarawan at Paggamit rotate3d() CSS

rotate3d() Ang function na ito ay naglalarawan ng 3D pag-iba ng elemento. transform Ginagamit sa katangian.

Halimbawa

Halimbawa 1

Gamitin rotate3d() I-rotate ang ilang <div> na elemento:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Subukan ang iyong sarili

Halimbawa 2

Gamitin rotate3d() I-rotate ang imahe:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Subukan ang iyong sarili

CSS Grammar

rotate3d(x, y, z, angle)
Halaga Paglalarawan
x Positibo o negatibo, naglalarawan ng pag-iba sa x-aksis.
y Positibo o negatibo, naglalarawan ng pag-iba sa y-aksis.
z Positibo o negatibo, naglalarawan ng pag-iba sa z-aksis.
angle

Hinihingi. Ibigay ang anggulo ng pag-iba. Posibleng mga yunit:

  • deg(grado)
  • rad(arko)
  • turn(sirkulo)

Detalye ng teknolohiya

Bersyon: CSS Transforms Module Level 2

Suporta ng browser

Ang mga numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa function.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Mga pahina na may kaugnayan

Tuturial:CSS 3D 变换

参考:CSS transform 属性

参考:CSS rotate 属性

参考:CSS rotate() 函数

参考:CSS rotateX() 函数

参考:CSS rotateY() 函数

参考:CSS rotateZ() 函数