transform: rotateY() у CSS — оберт елемента навколо осі Y

Опис

rotateY() - це функція в CSS, яка дозволяє обертати елемент навколо вертикальної осі Y. Це означає, що елемент обертається у вертикальній площині, яка проходить через центр елемента. Використання цієї функції дозволяє створювати цікаві анімації та ефекти на сторінці.

Приклад використання:

Нехай у нас є такий HTML-код:

<div class="box">Це елемент, який потрібно обертати навколо вертикальної осі Y.</div>

Щоб обернути елемент на 45 градусів вправо навколо вертикальної осі Y, використовуйте такий CSS:

.box {
  transform: rotateY(45deg);
}

Цей код здійснює обертання елемента на 45 градусів вправо навколо вертикальної осі Y.

автор: Bond

Загальний опис

автор: NagarD

Порада: Функцію rotateY() можна комбінувати з іншими CSS-функціями, такими як translate(), scale() або rotateX(), для створення складних ефектів обертання та трансформації.
автор: Bond
Порада: Враховуйте, що обертання за допомогою функції rotateY() впливає на видимість та розташування елементів, зокрема на їхню ширину та висоту.
автор: Bond
Порада: Використовуйте режим прозорості (opacity) або перекриття (z-index) для управління видимістю та позиціонуванням обернених елементів.
автор: Bond
Порада: Функція rotateY() дозволяє створювати різні ефекти, змінюючи положення та орієнтацію елемента на сторінці. Завдяки цій функції можна додавати динамічність та рух до дизайну, що зробить ваші веб-сайти та додатки більш привабливими та захоплюючими для користувачів.
автор: Bond

Синтаксис

transform: rotateY(<value>);

Функція rotateY може отримувати 3 значень:

<deg>

Значення кута може бути вказане в градусах (deg)

автор: Bond

<rad>

Значення кута можуть бути вказані в радіанах (rad)

автор: Bond

<turn>

Значення кута можуть бути вказані в повних обертах (turn)

автор: Bond

Значення без задання:	0deg

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	12	10	4	15	12	10

Підтримка: мобільні переглядачі
Переглядач
	3	18	10	3.2

Приклади

+ запропонувати свій приклад у пісочниці

Блок повертається на 45 градусів навколо вертикальної осі Y.

HTML

<div id="description">
  <p>Блок повертається на 45 градусів навколо вертикальної осі Y за допомогою функції rotateY(). Обидва блоки використовують однакові розміри та колір для порівняння.</p>
</div>

<div class="container">
  <div class="block"></div>
  <div class="comparison-block"></div>
</div>

CSS

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.container {
  height: 200px;
  background-color: #F2F2F2;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.block {
  width: 80px;
  height: 80px;
  background-color: #FFC107;
  transform: rotateY(45deg);
}

.comparison-block {
  width: 80px;
  height: 80px;
  background-color: #FF0000;
}

автор: Bond

При наведенні курсору на блок, він повертається на 180 градусів навколо вертикальної осі Y.

HTML

<div id="description">
  <p>При наведенні курсору на блок, він повертається на 180 градусів навколо вертикальної осі Y за допомогою функції rotateY().</p>
</div>

<div class="container">
  <div class="block"></div>
</div>

CSS

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.container {
  height: 200px;
  background-color: #F2F2F2;
  position: relative;
}

.block {
  width: 100px;
  height: 100px;
  background-color: #FFC107;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotateY(0deg);
  transition: transform 0.3s ease;
}

.container:hover .block {
  transform: rotateY(180deg);
}

автор: Bond

Верхній ряд — rotateY() БЕЗ перспективи: коробка просто вужчає, а на 90° зникає зовсім. Нижній — ті самі кути, але батько має perspective: 400px, і аж тепер це схоже на обертання. Далі — 180°, який показує зворотний бік, невалідний rotateY(45) без одиниці, і жива двобічна картка: наведіть на неї, щоб перевернути.

HTML

<p class="head">Без перспективи rotateY() — це просто стиск по горизонталі.
    Коробка 160×90, кути від 0 до 180°:</p>
<div class="grid">
    <figure><div class="stage"><div class="b r0">0deg</div></div><figcaption>0deg — 160×90</figcaption></figure>
    <figure><div class="stage"><div class="b r1">30deg</div></div><figcaption>30deg — 138.6×90</figcaption></figure>
    <figure><div class="stage"><div class="b r2">45deg</div></div><figcaption>45deg — 113.1×90</figcaption></figure>
    <figure><div class="stage"><div class="b r3">60deg</div></div><figcaption>60deg — 80×90</figcaption></figure>
    <figure><div class="stage"><div class="b r4">90deg</div></div><figcaption>90deg — ширина 0</figcaption></figure>
    <figure><div class="stage"><div class="b r5">180deg</div></div><figcaption>180deg — рамка та сама, бік зворотний</figcaption></figure>
</div>

<p class="head">Ті самі кути, але в батька задано perspective: 400px —
    і аж тепер це обертання:</p>
<div class="grid">
    <figure><div class="stage persp"><div class="b r0">0deg</div></div><figcaption>0deg</figcaption></figure>
    <figure><div class="stage persp"><div class="b r1">30deg</div></div><figcaption>30deg</figcaption></figure>
    <figure><div class="stage persp"><div class="b r2">45deg</div></div><figcaption>45deg</figcaption></figure>
    <figure><div class="stage persp"><div class="b r3">60deg</div></div><figcaption>60deg</figcaption></figure>
    <figure><div class="stage persp"><div class="b r4">90deg</div></div><figcaption>90deg</figcaption></figure>
    <figure><div class="stage persp"><div class="b r6">-45deg</div></div><figcaption>-45deg — у другий бік</figcaption></figure>
</div>

<p class="head">⚠️ Одиниця кута обов'язкова — коробку нижче не повернуто зовсім:</p>
<div class="grid">
    <figure><div class="stage persp"><div class="b bad">rotateY(45)</div></div><figcaption>відкинуто</figcaption></figure>
    <figure><div class="stage persp"><div class="b turn">0.125turn</div></div><figcaption>turn працює — це 45deg</figcaption></figure>
</div>

<p class="head">Двобічна картка: наведіть, щоб перевернути. Праворуч — та сама
    картка, зафіксована перевернутою:</p>
<div class="grid">
    <div class="scene"><div class="card"><span class="face front">лицевий бік</span><span class="face back">зворотний бік</span></div></div>
    <div class="scene"><div class="card flipped"><span class="face front">лицевий бік</span><span class="face back">зворотний бік</span></div></div>
</div>

CSS

.head {
    margin: 20px 0 8px;
    max-width: 620px;
    color: #5a6472;
    font-size: .9em;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

figure {
    margin: 0;
    width: 200px;
}

figcaption {
    margin-top: 6px;
    color: #5a6472;
    font: 12px/1.35 ui-monospace, monospace;
}

.stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 130px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

.persp {
    perspective: 400px;
}

.b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 90px;
    background: #2f6fd0;
    color: #fff;
    font: 700 14px/1 ui-monospace, monospace;
}

.r0 { transform: rotateY(0deg); }
.r1 { transform: rotateY(30deg); }
.r2 { transform: rotateY(45deg); }
.r3 { transform: rotateY(60deg); }
.r4 { transform: rotateY(90deg); }
.r5 { transform: rotateY(180deg); }
.r6 { transform: rotateY(-45deg); }

.bad {
    background: #d64545;
    transform: rotateY(45);
}

.turn {
    background: #3a9a4f;
    transform: rotateY(0.125turn);
}

.scene {
    width: 220px;
    height: 130px;
    perspective: 600px;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s;
}

.scene:hover .card {
    transform: rotateY(180deg);
}

.card.flipped {
    transform: rotateY(180deg);
}

.face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    color: #fff;
    font: 700 15px/1 ui-monospace, monospace;
}

.front { background: #2f6fd0; }

.back {
    background: #3a9a4f;
    transform: rotateY(180deg);
}

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.