Функсияи rotateY

Функсияи rotateY гардондани элементро нисбат ба меҳвари Y дар фазои сеандоза таъин мекунад. Бо хосияти transform кор мекунад. Қимати он кунҷест дар ягон воҳиди кунҷӣ. Қимати мусбат ба сӯи мо, манфӣ - аз мо мегардонад. Гардондани элемент атрофи нуқтае сурат мегирад, ки аз тарафи хосияти transform-origin муайян карда мешавад.

Синтаксис

cssинтихобкунанда {
  transform: rotateY(кунҷ);
}

Намуна

Дар ин намуна блок бо гардиши курсор 180 дараҷа атрофи меҳвари Y мегардад. Барои ба таври мулоим гардидани он хосияти 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);
}

Результат:

Ҳамчунин нигаред