CSS translateZ() — зсув до глядача й від нього

Опис

translateZ() - це функція CSS, яка використовується для зміщення елемента по осі Z (глибині) в тривимірному просторі. За допомогою цієї функції можна змінити положення елемента в третьому вимірі відносно його вихідної позиції.

Ця функція приймає один аргумент, який вказує величину зсуву по осі Z. Позитивне значення зсуває елемент вгору, а негативне - вниз. Значення можуть бути вказані в пікселях (px), відсотках (%), відносних одиницях (em, rem) або використовувати ключові слова.

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

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

<div class="box">Це елемент з тривимірним ефектом.</div>

Для зсуву елемента на 100 пікселів вгору в третьому вимірі, застосуємо наступний CSS:

.box {
  transform: translateZ(100px);
}

Цей приклад зміщує елемент вгору відносно його вихідного положення на 100 пікселів у третьому вимірі.

автор: Bond

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

автор: NagarD

Порада

Функція translateZ() особливо корисна при роботі з тривимірною графікою або створенні ефектів перспективи. Вона дозволяє контролювати глибину елементів і створювати захоплюючі тривимірні ефекти на сторінці. Ви можете експериментувати з різними значеннями для отримання бажаного зсуву і створення унікальних дизайнів.

автор: Bond
Нотатка

Значення може впливати на відображення елемента, якщо використовується перспектива (perspective) на його батьківському елементі.

автор: Bond

Синтаксис

transform: translateZ(value);

Функція translateZ може отримувати єдине значення:

<length>

Величина зсуву в пікселях/відсотках/відносних одиницях

автор: Bond

Значення без задання: none

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
12 10 4 15 12 10
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
3 18 10 3.2

Приклади

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

Приклад використання translateZ() для зсуву елемента по осі Z.

HTML

<div id="description">
  <p>Звичайний блок має синій колір фону та не має зсуву по осі Z.</p>
  <p>Блок з використанням функції <code>translateZ()</code> має червоний колір фону та зсувається на 100 пікселів углиб тривимірного простору.</p>
</div>

<div class="container">
  <div class="block"></div>
  <div class="block-translateZ"></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 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f2f2f2;
  perspective: 500px;
}

.block {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  transform: translateZ(0);
}

.block-translateZ {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
  transform: translateZ(100px);
}
автор: Bond

HTML

<div id="description">
  <p>У цьому коді кожне зображення має власну змінну CSS <strong>--translate-value</strong>, яка визначає значення функції <em>translateZ()</em> для кожного зображення.</p>
<p>Просто наведіть курсор на зображення для демонстрації прикладу:</p>
</div>

<div class="container">
  <img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image" style="--translate-value: -50px;">
  <img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image" style="--translate-value: 0;">
  <img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image" style="--translate-value: 30px;">
  <img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Sample image" style="--translate-value: -20px;">
</div>

<div class="container">
  <span class="image-caption">-50px</span>
  <span class="image-caption">Без зсуву</span>
  <span class="image-caption">30px</span>
  <span class="image-caption">-20px</span>
</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 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  perspective: 200px;
  padding: 5px;
}

.image {
  width: 100px;
  height: 100px;
  margin: 10px;
  transition: transform 0.5s ease;
  position: relative;
}

.image:hover {
  transform: translateZ(var(--translate-value));
}

.image-caption {
  width: 20%;
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 15px;
}
автор: Bond

П'ять карток в одній сцені з perspective: 500px: від −200px углиб до +120px до глядача — розмір видно на око. Нижче — три випадки з тим самим translateZ(120px): без перспективи взагалі, за проміжною обгорткою без preserve-3d і та сама обгортка з preserve-3d, де ефект повертається.

HTML

<p class="head">perspective: 500px на спільному батькові — одна точка сходу:</p>
<div class="scene">
    <div class="card z1">-200px</div>
    <div class="card z2">-100px</div>
    <div class="card z3">0</div>
    <div class="card z4">+60px</div>
    <div class="card z5">+120px</div>
</div>

<p class="head">Три випадки поспіль — усюди translateZ(120px):</p>
<div class="tests">
    <figure>
        <div class="plain">
            <div class="card zt">без перспективи</div>
        </div>
        <figcaption>перспективи немає — розмір не змінився</figcaption>
    </figure>

    <figure>
        <div class="scene small">
            <div class="wrap">
                <div class="card zt">крізь обгортку</div>
            </div>
        </div>
        <figcaption>обгортка сплющила сцену — ефекту немає</figcaption>
    </figure>

    <figure>
        <div class="scene small">
            <div class="wrap keep">
                <div class="card zt">preserve-3d</div>
            </div>
        </div>
        <figcaption>transform-style: preserve-3d — ефект повернувся</figcaption>
    </figure>
</div>

CSS

.head {
    margin: 18px 0 8px;
    color: #5a6472;
    font-size: .9em;
}

.scene {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 26px;
    height: 170px;
    padding: 10px 30px;
    perspective: 500px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

.scene.small {
    justify-content: center;
    height: 150px;
}

.plain {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 10px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 50px;
    background: #2f6fd0;
    color: #fff;
    font: 600 11px/1.2 ui-monospace, monospace;
    text-align: center;
}

.z1 { transform: translateZ(-200px); }
.z2 { transform: translateZ(-100px); }
.z3 { transform: translateZ(0); }
.z4 { transform: translateZ(60px); }
.z5 { transform: translateZ(120px); }
.zt { transform: translateZ(120px); }

.tests {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tests figure {
    margin: 0;
    width: 230px;
}

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

.wrap {
    padding: 4px;
    border: 1px dashed #d64545;
}

.keep {
    transform-style: preserve-3d;
    border-color: #3a9a4f;
}
автор: 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`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

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

Правка
Зворотний зв'язок
Вхід