Kazi ya rotate

Kazi rotate() inaweka mzunguko wa kipengele kwa pembe fulani. Inatumika pamoja na sifa transform. Thamani ya sifa ni pembe katika vipimo vyovyote vya pembe. Thamani chanya inazungusha kwa upande wa saa, hasi - kinyume. Mzunguko unafanywa kuzunguka pointi inayowekwa na sifa transform-origin.

Kiufundi

kichaguzi {
	transform: rotate(pembe);
}

Mfano

Katika mfano huu, kipengele kimezungushwa 30 digrii kwa upande wa saa:

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

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

Mfano

Katika mfano huu, kipengele kimezungushwa 30 digrii kinyume na upande wa saa:

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

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

Mfano

Katika mfano huu, kipengele kitazunguka 1 mzunguko kamili inapopatikana, kwa sababu thamani ya mzunguko imewekwa kwa 1turn (athari ileile inaweza kupatikana, kama pembe ya mzunguko itawekwa kwa 360deg). Kwa ulaini wa mzunguko umeongezwa sifa transition:

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

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

Angalia pia

kazi rotateX,
ambayo inaweka mzunguko kuzunguka mhimili X
kazi rotateY,
ambayo inaweka mzunguko kuzunguka mhimili Y
kazi rotateZ,
ambayo inaweka mzunguko kuzunguka mhimili Z
kazi rotate3d,
ambayo inaweka mzunguko kuzunguka mihimili mitatu