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, що створить ефект зближення або віддалення об'єкта у тривимірному просторі.

автор: Bond

Порада: Використовуйте scaleZ() у поєднанні з іншими функціями трансформації CSS, щоб створювати складні тривимірні ефекти.
автор: Bond
Порада: Пам'ятайте, що значення scaleZ() впливають на просторові властивості елементів, тому враховуйте це при використанні функції.
автор: Bond
Порада: Елементи, які мають властивості перетворення, можуть мати більше розрахунків для браузера, тому використовуйте функцію розумно та уникайте зайвого навантаження на сторінку.
автор: Bond
Порада: Цю функцію можна комбінувати з іншими функціями трансформації CSS, такими як scaleX(), scaleY(), rotate(), translate() та іншими, для створення складних ефектів перетворення у тривимірному просторі. Завдяки функції scaleZ() ви можете розширити можливості дизайну вашого веб-сайту, надаючи йому вражаючої глибини та динамічних ефектів.
автор: Bond
Нотатка: scaleZ(size) еквівалентно scale3d(1, 1, size).
автор: Bond

Синтаксис

scaleZ(<number|unit|key>);

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

<number>

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

автор: Bond

<unit>

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

автор: Bond

<key>

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

автор: Bond

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

Переглядачі

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

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

Приклади

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

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

автор: Bond

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

автор: Bond

Коментарі

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