Функция rotateX

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

Синтаксис

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

Мысал

Бұл мысалда блок үстіне курсор қойғанда X осі бойынша 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: rotateX(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: rotateX(180deg);
}

Результат:

Мысал

Теріс бұрыш белгілейік:

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: rotateX(-180deg);
}

Результат:

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