Kelembutan CSS rotate

Halaman sebelumnya Kanan
Halaman berikutnya row-gap

Definisi dan penggunaan

rotate Atribut ini memungkinkan Anda memutar elemen.

rotate Atribut ini mendefinisikan nilai yang menunjukkan tingkat putar elemen mengelilingi sumbu z. Untuk mengputar elemen mengelilingi sumbu x, y, atau cara lain, perlu mendefinisikan dengan cara yang sesuai.

rotate Nilai atribut ini dapat berupa sudut, nama sumbu + sudut, atau tiga nilai + sudut.

Jika hanya diberikan sudut, elemen akan berputar mengelilingi sumbu z dengan arah jam.
Jika diberikan nama sumbu + sudut, elemen akan berputar mengelilingi sumbu yang ditentukan dengan arah jam
Jika diberikan tiga nilai + sudut, tiga nilai ini mendefinisikan sebuah vektor, elemen akan berputar mengelilingi vektor ini.

Untuk memahami lebih baik rotate Atribut, lihatPertunjukan.

Perhatian:Teknik lain untuk memutar elemen adalah menggunakan Fungsi rotate() CSS Atribut transform CSS.

Contoh

Contoh 1

Ubah putar elemen:

div {
  rotate: 30deg;
}

Coba sendiri

Contoh 2

Ketika rotate Ketika atribut diset ke vektor dan sudut, elemen akan berputar mengelilingi vektor ini.

Di sini, vektor adalah [1 1 0] di dalam bidang dua dimensi, memiliki koordinat x dan y, dan berputar 60 derajat:

div {
  rotate: 1 1 0 60deg;
}

Coba sendiri

Buat bahasa CSS

rotate: sumbu angle|initial|inherit;

Nilai atribut

Nilai	Deskripsi
sumbu	Pilihan. Jika belum diset, nilai baku adalah sumbu z. Mendefinisikan sumbu putar elemen yang akan dirotasi. x y z
angle	Mendefinisikan tingkat putar elemen. Unit yang mungkin: deg（derajat) rad（radian) putar（sudut)
sudut vektor	Tiga angka ini mendefinisikan sebuah vektor, elemen akan berputar mengelilingi vektor ini. Tiga angka ini masing-masing adalah koordinat x, y, dan z vektor. Nilai terakhir adalah sudut putar. Nilai yang mungkin: number number number angle
initial	Atur sifat ini ke nilai baku. Lihat initial.
inherit	Mengambil sifat ini dari elemen induknya. Lihat inherit.

Detil teknologi

Nilai baku:	none
Inheritance:	Tidak
Pembuatan animasi:	Didukung. Lihat:Atribut berhubungan dengan animasi.
Versi:	CSS3
Buat bahasa JavaScript:	object.style.rotate="-120deg"