Функция rotate3d

rotate3d функциясы элементті берілген бұрышқа бір мезгілде X, Y, Z осьтеріне қатысты үшөлшемді кеңістікте бұрады. transform сипатымен бірге қолданылады. Сипаттың мәні ретінде бұрыш бірліктерінің кез келген түріндегі бұрыш қызмет етеді.

Функция мән ретінде үтірлермен бөлінген 4 параметрді қабылдайды. Алғашқы үш параметр үшөлшемді кеңістіктегі ось векторын анықтайды, сол оське қатысты бұру орындалады. Төртінші параметр бұрылу бұрышын белгілейді.

Синтаксис

cssселектор {
  transform: rotate3d(X, Y, Z, бұрыш);
}

Мысал

Бұл мысалда ось векторы экранның оң жақ жоғарғы жағына бағытталады:

html<div id="elem">lorem ipsum</div>
css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

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

  • rotate функциясы,
    ол X және Y осьтері бойынша бұруды белгілейді
  • rotateX функциясы,
    ол X осі бойынша бұруды белгілейді
  • rotateY функциясы,
    ол Y осі бойынша бұруды белгілейді
  • rotateZ функциясы,
    ол Z осі бойынша бұруды белгілейді