Функция rotate

Функция rotate() элементті берілген бұрышқа бұруды белгілейді. transform сипатымен бірге қолданылады. Сипаттың мәні ретінде кез келген бұрыш бірліктері қолданылады. Оң мән сағат тілінің бағытымен бұрады, теріс мән - сағат тіліне қарсы. Бұру transform-origin сипатымен анықталатын нүкте айналасында жүзеге асырылады.

Синтаксис

cssселектор {
  transform: rotate(бұрыш);
}

Мысал

Бұл мысалда блок 30 градусқа сағат тілінің бағытымен бұрылған:

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

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

Результат:

Мысал

Бұл мысалда блок 30 градусқа сағат тіліне қарсы бағытта бұрылған:

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

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

Результат:

Мысал

Бұл мысалда блок үстіне курсор қойғанда 1 айналымға бұрылады, себебі бұру мәні 1turn ретінде берілген (бұл әсерді 360deg бұрышын беру арқылы да қол жеткізуге болады). Бұрылудың тегістігі үшін 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);
}

Результат:

Сондай-ақ қараңыз