Fungsi rotate

Fungsi rotate() menetapkan putaran elemen pada sudut yang ditentukan. Digunakan bersama dengan sifat transform. Nilai sifat adalah sudut dalam sebarang unit untuk sudut. Nilai positif memutar ikut arah jam, nilai negatif - lawan arah jam. Putaran dilakukan di sekitar titik yang ditetapkan oleh sifat transform-origin.

Sintaks

pemilih {
	transform: rotate(sudut);
}

Contoh

Dalam contoh ini, blok diputar 30 darajat ikut arah 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 30 darajat lawan arah 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 1 pusingan apabila dikunjungi, kerana nilai putaran ditetapkan dalam 1turn (kesan yang sama boleh dicapai jika sudut putaran ditetapkan dalam 360deg). Untuk kelancaran putaran, sifat transition ditambah:

<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 menetapkan putaran pada paksi X
fungsi rotateY,
yang menetapkan putaran pada paksi Y
fungsi rotateZ,
yang menetapkan putaran pada paksi Z
fungsi rotate3d,
yang menetapkan putaran pada tiga paksi