Pereka pereka menganjurkan:

Fungsi rotate3d() CSS

Definisi dan penggunaan rotate3d() CSS

rotate3d() Fungsi mendefinikan putar 3D elemen. transform digunakan dalam atribut.

Contoh

Contoh 1

Gunakan rotate3d() Putar banyak elemen <div>:

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

Cuba sendiri

Contoh 2

Gunakan rotate3d() Putar imej:

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

Cuba sendiri

Syntaks CSS

rotate3d(x, y, z, angle)
Nilai Penerangan
x Nombor positif atau negatif, mensyifatkan putar di sepanjang sumbu x.
y Nombor positif atau negatif, mensyifatkan putar di sepanjang sumbu y.
z Nombor positif atau negatif, mensyifatkan putar di sepanjang sumbu z.
angle

Diperlukan. Tentukan sudut putar. Unit yang mungkin:

  • deg（sudut derajat)
  • rad（sudut radian)
  • turn（belah)

Butir teknikal

Versi: Modul Transformasi CSS Level 2

Pendukung pereka pereka

Nombor dalam tabel menunjukkan versi penuh pereka pereka yang mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Halaman yang berkaitan

Tutori:Transformasi 3D CSS

Rujukan：Sifat transform CSS

Rujukan：属性 CSS rotate

Rujukan：Fungsi rotate() CSS

Rujukan：Fungsi rotateX() CSS

Rujukan：Fungsi rotateY() CSS

Rujukan：Fungsi rotateZ() CSS