transform: rotateZ() у CSS — плоский оберт у площині екрана

Опис

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

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

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

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

Щоб обернути елемент на 45 градусів за годинниковою стрілкою навколо осі Z, використовуйте такий CSS:

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

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

автор: Bond

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

автор: NagarD

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

Синтаксис

transform: rotateZ(<value>);

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

<deg>

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

автор: Bond

<rad>

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

автор: Bond

<turn>

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

автор: Bond

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

Переглядачі

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

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

Приклади

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

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

HTML

<div id="description">
  <p>При наведенні курсору на блок, він повертається на 180 градусів навколо осі Z за допомогою функції rotateZ().</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: rotateZ(0deg);
  transition: transform 0.3s ease;
}

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

автор: Bond

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

HTML

<div id="description">
  <p>Блок повертається на 45 градусів навколо осі Z за допомогою функції rotateZ(). Обидва блоки використовують однакові розміри для порівняння.</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: rotateZ(45deg);
}

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

автор: Bond

Перший ряд — доказ рівності: rotateZ(45deg), rotate(45deg) і rotate3d(0, 0, 1, 45deg) дають однакову картинку, а перспектива на неї не впливає — на відміну від rotateY(45deg) поруч. Далі — та сама коробка з різними transform-origin, пара, де порядок у списку змінює результат, і невалідний rotateZ(45) без одиниці кута.

HTML

<p class="head">Три різні записи — одна й та сама картинка. Четверта коробка
    показує, що перспектива на rotateZ() не впливає взагалі:</p>
<div class="grid">
    <figure><div class="stage"><div class="b z1">rotateZ</div></div><figcaption>rotateZ(45deg)</figcaption></figure>
    <figure><div class="stage"><div class="b z2">rotate</div></div><figcaption>rotate(45deg)</figcaption></figure>
    <figure><div class="stage"><div class="b z3">rotate3d</div></div><figcaption>rotate3d(0, 0, 1, 45deg)</figcaption></figure>
    <figure><div class="stage persp"><div class="b z1">rotateZ</div></div><figcaption>rotateZ(45deg) у perspective: 400px — без змін</figcaption></figure>
    <figure><div class="stage persp"><div class="b y1">rotateY</div></div><figcaption>rotateY(45deg) у тій самій перспективі — ось де глибина</figcaption></figure>
</div>

<p class="head">Точка обертання — transform-origin. Типово центр:</p>
<div class="grid">
    <figure><div class="stage"><div class="b o1">center</div></div><figcaption>типово</figcaption></figure>
    <figure><div class="stage"><div class="b o2">left top</div></div><figcaption>transform-origin: left top</figcaption></figure>
    <figure><div class="stage"><div class="b o3">left bottom</div></div><figcaption>transform-origin: left bottom</figcaption></figure>
    <figure><div class="stage"><div class="b o4">right center</div></div><figcaption>transform-origin: right center</figcaption></figure>
</div>

<p class="head">Порядок у списку вирішує: спершу зсув, потім поворот — і навпаки:</p>
<div class="grid">
    <figure><div class="stage"><div class="b m1">1 → 2</div></div><figcaption>translateX(50px) rotateZ(45deg)</figcaption></figure>
    <figure><div class="stage"><div class="b m2">2 → 1</div></div><figcaption>rotateZ(45deg) translateX(50px)</figcaption></figure>
</div>

<p class="head">⚠️ Одиниця кута обов'язкова:</p>
<div class="grid">
    <figure><div class="stage"><div class="b bad">rotateZ(45)</div></div><figcaption>відкинуто — не повернуто</figcaption></figure>
    <figure><div class="stage"><div class="b turn">0.125turn</div></div><figcaption>turn працює — це 45deg</figcaption></figure>
</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: 170px;
}

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

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

.persp {
    perspective: 400px;
}

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

.z1 { transform: rotateZ(45deg); }
.z2 { transform: rotate(45deg); }
.z3 { transform: rotate3d(0, 0, 1, 45deg); }
.y1 { transform: rotateY(45deg); background: #3a9a4f; }

.o1 { transform: rotateZ(30deg); }
.o2 { transform: rotateZ(30deg); transform-origin: left top; }
.o3 { transform: rotateZ(30deg); transform-origin: left bottom; }
.o4 { transform: rotateZ(30deg); transform-origin: right center; }

.m1 { transform: translateX(50px) rotateZ(45deg); background: #e08a1e; }
.m2 { transform: rotateZ(45deg) translateX(50px); background: #e08a1e; }

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

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

автор: 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`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

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