Функция rotate
Функция rotate() элементті берілген бұрышқа
бұруды белгілейді. transform
сипатымен бірге қолданылады. Сипаттың мәні ретінде
кез келген бұрыш бірліктері
қолданылады. Оң мән сағат тілінің бағытымен бұрады,
теріс мән - сағат тіліне қарсы. Бұру transform-origin
сипатымен анықталатын нүкте айналасында жүзеге асырылады.
Синтаксис
селектор {
transform: rotate(бұрыш);
}
Мысал
Бұл мысалда блок 30 градусқа сағат тілінің
бағытымен бұрылған:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Мысал
Бұл мысалда блок 30 градусқа сағат тіліне
қарсы бағытта бұрылған:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Мысал
Бұл мысалда блок үстіне курсор қойғанда 1
айналымға бұрылады, себебі бұру мәні 1turn
ретінде берілген (бұл әсерді 360deg бұрышын
беру арқылы да қол жеткізуге болады). Бұрылудың
тегістігі үшін 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);
}
:
