Функция rotateZ
rotateZ функциясы үшөлшемді кеңістікте
Z осі бойынша бұруды орнатады.
transform сипатымен бірге қолданылады.
Сипаттың мәні ретінде бұрыш бірліктерінің
кез келген түріндегі бұрыш беріледі. Оң мән сағат тілінің бағытымен бұрады,
теріс мән - сағат тіліне қарсы.
Бұру transform-origin
сипатымен анықталатын нүкте айналасында жүзеге асырылады.
Синтаксис
cssселектор {
transform: rotateZ(бұрыш);
}
Мысал
Бұл мысалда блок үстіне курсор қойғанда Z осі бойынша
180 градусқа бұрылады. Бұрудың тегіндігі үшін
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: rotateZ(180deg);
}
Результат:
Мысал
transform-origin
сипатының көмегімен айналу осін өзгертейік:
html<div id="elem">lorem ipsum</div>css#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateZ(180deg);
}
Результат: