Рекомендации по курсу:

Функция CSS rotateY()

Определение и использование rotateY() CSS

rotateY() Функция определяет 3D-поворот элемента вокруг оси y (вертикальной оси). transform Используется в свойстве.

Пример

Пример 1

Использование rotateY() Поворот нескольких элементов <div> вокруг оси y (вертикальной оси):

#myDiv1 {
  transform: rotateY(40deg);
}
#myDiv2 {
  transform: rotateY(60deg);
}
#myDiv3 {
  transform: rotateY(80deg);
}

Попробуйте сами

Пример 2

Использование rotateY() Поворот изображения вокруг оси y (вертикальной оси):

#img1 {
  transform: rotateY(40deg);
}
#img2 {
  transform: rotateY(60deg);
}
#img3 {
  transform: rotateY(80deg);
}

Попробуйте сами

CSS грамматика

rotateY(angle)
Значение Описание
angle

Обязателен. Указать угол поворота. Возможные единицы:

  • deg（градусы）
  • rad（радианы）
  • turn（круг）

Технические детали

Версия: CSS Transforms Module Level 2

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Соответствующие страницы

Учебное пособие:CSS 3D трансформации

См. также:Свойство transform в CSS

См. также:Свойство rotate в CSS

См. также:Функция rotate() в CSS

См. также:Функция rotate3d() в CSS

См. также:Функция rotateX() в CSS

См. также:Функция rotateZ() в CSS