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, що створить ефект зближення або віддалення об'єкта у тривимірному просторі.
- Порада
-
Використовуйте
автор: BondscaleZ()у поєднанні з іншими функціями трансформації CSS, щоб створювати складні тривимірні ефекти. - Порада
-
Пам'ятайте, що значення
автор: BondscaleZ()впливають на просторові властивості елементів, тому враховуйте це при використанні функції. - Порада
-
Елементи, які мають властивості перетворення, можуть мати більше розрахунків для браузера, тому використовуйте функцію розумно та уникайте зайвого навантаження на сторінку.
автор: Bond - Порада
-
Цю функцію можна комбінувати з іншими функціями трансформації CSS, такими як
автор: BondscaleX(),scaleY(),rotate(),translate()та іншими, для створення складних ефектів перетворення у тривимірному просторі. Завдяки функціїscaleZ()ви можете розширити можливості дизайну вашого веб-сайту, надаючи йому вражаючої глибини та динамічних ефектів. - Нотатка
-
автор: BondscaleZ(size)еквівалентноscale3d(1, 1, size).
Синтаксис
scaleZ(<number|unit|key>);Функція scaleZ може отримувати 3 значень:
-
<number> -
Безрозмірне числове значення: Наприклад,
автор: Bond2,-0.5,0. -
<unit> -
Наприклад,
автор: Bondpx,%,em,rem. -
<key> -
Інші значення, що приймаються властивістю
автор: Bondtransform: Наприклад,initial,inherit,unset
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 12 | 10 | 4 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 10 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
При натисканні на кнопку Натисніть для масштабування, елемент .box збільшується вздовж осі Z за допомогою функції scaleZ(100px). Зміна елементу відбувається при фокусуванні на кнопці, що додається за допомогою псевдокласу :focus.
Обидва елементи .box мають однаковий розмір, але другий елемент має застосовану функцію scaleZ(-100px), що зменшує його глибину.
Коментарі
Коментарів ще немає — будьте першим!