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);
}

Результат:

Ошондой эле караңыз