rotateY функциясы

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

Синтаксис

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

Мысал

Бұл мысалда блок үстіне курсор қойған кезде Y осі бойынша 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: rotateY(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: right center;
}
#elem:hover {
  transform: rotateY(180deg);
}

Результат:

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