Fungsi rotate

Fungsi rotate() mengatur rotasi elemen pada sudut yang ditentukan. Digunakan bersama dengan properti transform. Nilai propertinya adalah sudut dalam satuan untuk sudut apa pun. Nilai positif memutar searah jarum jam, nilai negatif - berlawanan arah jarum jam. Rotasi dilakukan di sekitar titik yang ditentukan oleh properti transform-origin.

Sintaksis

selektor {
	transform: rotate(sudut);
}

Contoh

Dalam contoh ini, blok diputar sebesar 30 derajat searah jarum jam:

<div id="elem">lorem ipsum</div>

#elem {
	transform: rotate(30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Contoh

Dalam contoh ini, blok diputar sebesar 30 derajat berlawanan arah jarum jam:

<div id="elem">lorem ipsum</div>

#elem {
	transform: rotate(-30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Contoh

Dalam contoh ini, blok akan berputar sebesar 1 putaran saat dihover, karena nilai rotasi ditetapkan dalam 1turn (efek yang sama dapat dicapai jika sudut rotasi ditetapkan ke 360deg). Untuk kelancaran rotasi, properti transition ditambahkan:

<div id="elem">lorem ipsum</div>

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
}
#elem:hover {
	transform: rotate(1turn);
}

Lihat juga

fungsi rotateX,
yang mengatur rotasi pada sumbu X
fungsi rotateY,
yang mengatur rotasi pada sumbu Y
fungsi rotateZ,
yang mengatur rotasi pada sumbu Z
fungsi rotate3d,
yang mengatur rotasi pada tiga sumbu