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

csskichaguzi {
  transform: rotate(pembe);
}

Mfano

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

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

css#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:

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

css#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:

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

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

Результат:

Angalia pia