Atribut rotate CSS

Halaman sebelumnya Kanan
Halaman berikutnya row-gap

Definisi dan penggunaan

rotate Atribut ini memungkinkan Anda untuk memutar elemen.

rotate Atribut mendefinisikan nilai yang menunjukkan tingkat putar elemen mengitari sumbu z searah jarum jam. Untuk mengputar elemen mengitari sumbu x, y, atau cara lain, perlu melakukan definisi yang sesuai.

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

Jika hanya diberikan sudut, elemen akan berputar mengitari sumbu z searah jarum jam.
Jika diberikan nama sumbu + sudut, elemen akan berputar mengitari sumbu yang ditentukan searah jarum jam.
Jika diberikan tiga nilai + sudut, tiga nilai ini mendefinisikan sebuah vektor, elemen akan berputar mengitari 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 disetel ke vektor dan sudut, elemen akan berputar mengitari vektor ini.

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

div {
  rotate: 1 1 0 60deg;
}

Coba sendiri

Sintaksis CSS

rotate: sumbu angle|initial|inherit;

Nilai atribut

Nilai	Deskripsi
sumbu	Pilihan. Jika belum disetel, nilai standar adalah sumbu z. Mendefinisikan sumbu putar elemen. Nilai yang mungkin: x y z
angle	Mendefinisikan tingkat putar elemen. Unit yang mungkin: deg（derajat） rad（radian） putar（lunas）
sudut vektor	Tiga angka ini mendefinisikan sebuah vektor, elemen akan berputar mengitari 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 atribut ini ke nilai standarnya. Lihat initial.
inherit	Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai standar:	none
Inheritsi:	Tidak
Pembuatan animasi:	Didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi:	CSS3
Sintaksis JavaScript:	object.style.rotate="-120deg"