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

CSS function scale3d()

Опис

scale3d() - це функція CSS, яка використовується для зміни масштабу елемента у трьох вимірах: X (горизонтальна вісь), Y (вертикальна вісь) та Z (вісь глибини). Цей метод дозволяє змінювати розмір об'єкта у всіх трьох напрямках одночасно, що створює можливості для 3D-трансформацій та анімацій на веб-сторінках.

Функція scale3d() приймає три числових аргумента - scale3d(x, y, z), де кожне число вказує масштаб для відповідного виміру: x - горизонтальний масштаб, y - вертикальний масштаб, z - масштаб у глибину. Позитивні значення збільшують розмір елемента, негативні значення зменшують, а нуль залишає елемент без змін у відповідному вимірі.

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

/* Змінимо масштаб елемента у трьох вимірах */
.example-element {
  transform: scale3d(2, 1.5, 0.5);
}

У даному прикладі елемент з класом "example-element" буде збільшений удвічі по горизонталі, у 1,5 раза по вертикалі та зменшений у половину по осі глибини, створюючи ефект тривимірного масштабування.

Порада:

Використовуйте scale3d() з розсудливістю, оскільки зміна масштабу у трьох вимірах може впливати на спотворення пропорцій та зовнішній вигляд елементів.
Порада:

Експериментуйте з різними значеннями для X, Y та Z, щоб створити цікаві 3D-ефекти та перетворення.
Порада:

Зверніть увагу на дотримання пропорцій, особливо якщо використовуєте різні значення для трьох вимірів, щоб уникнути спотворення контенту.
Нотатка:

Ця функція також може поєднуватись з іншими значеннями transform, такими як translate3d(), rotate3d() або perspective(), щоб створити складні 3D-ефекти та анімації, які нададуть вашим веб-елементам вражаючого вигляду та динамічності. Використовуйте функцію scale3d(), щоб вивести свої веб-проекти на новий рівень та захопити увагу своїх користувачів.

Синтаксис

scale3d(<number>, <number>, <number>);
<number>

Числове значення, яке вказує масштаб для відповідного виміру. Позитивні значення збільшують розмір, негативні значення зменшують, а нуль залишає елемент без змін у відповідному вимірі.

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

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

Приклади


При наведенні курсору на блок .box, він змінює свій масштаб у трьох вимірах (X, Y, Z) за допомогою transform: scale3d(1.5, 1.4, 0.5).

Два елементи .box, проте другий має клас .scaled, що використовує transform: scale3d(1.5, 1, 0.5) для зміни масштабу у трьох вимірах та змінює колір на червоний.

Документи

Зв'язок