css.in.ua
Підтримати

CSS function scaleZ()

Опис

scaleZ() - це функція трансформації CSS, яка дозволяє масштабувати елемент у тривимірному просторі вздовж осі Z. Це дає змогу змінювати глибину об'єкта, створюючи вражаючі тривимірні ефекти на веб-сторінках.

Функція scaleZ() приймає один числовий аргумент - scaleZ(z), де z - це коефіцієнт масштабування для осі Z. Позитивні значення збільшують глибину елемента, а значення від 0 до 1 зменшують його. Використання від'ємних значень, наприклад scaleZ(-1), призведе до зміншення об'єкта та його відображення в інвертованому вигляді вздовж осі Z.

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

/* Змінимо глибину елемента вздовж осі Z */
.example-element {
  transform: scaleZ(1.5);
}

У даному прикладі елемент з класом "example-element" буде збільшений в 1.5 рази вздовж осі Z, що створить ефект зближення або віддалення об'єкта у тривимірному просторі.

Порада:

Використовуйте scaleZ() у поєднанні з іншими функціями трансформації CSS, щоб створювати складні тривимірні ефекти.
Порада:

Пам'ятайте, що значення scaleZ() впливають на просторові властивості елементів, тому враховуйте це при використанні функції.
Порада:

Елементи, які мають властивості перетворення, можуть мати більше розрахунків для браузера, тому використовуйте функцію розумно та уникайте зайвого навантаження на сторінку.
Нотатка:

scaleZ(size) еквівалентно scale3d(1, 1, size).
Порада:

Цю функцію можна комбінувати з іншими функціями трансформації CSS, такими як scaleX(), scaleY(), rotate(), translate() та іншими, для створення складних ефектів перетворення у тривимірному просторі. Завдяки функції scaleZ() ви можете розширити можливості дизайну вашого веб-сайту, надаючи йому вражаючої глибини та динамічних ефектів.

Синтаксис

scaleZ(<number|unit|key>);
<unit>

Наприклад, px, %, em, rem.

<number>

Безрозмірне числове значення: Наприклад, 2, -0.5, 0.

<key>

Інші значення, що приймаються властивістю transform: Наприклад, initial, inherit, unset

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

Мобільних переглядачів ще не додано.

Приклади


При натисканні на кнопку Натисніть для масштабування, елемент .box збільшується вздовж осі Z за допомогою функції scaleZ(100px). Зміна елементу відбувається при фокусуванні на кнопці, що додається за допомогою псевдокласу :focus.

Обидва елементи .box мають однаковий розмір, але другий елемент має застосовану функцію scaleZ(-100px), що зменшує його глибину.

Документи

Зв'язок