CSS function matrix3d
Опис
matrix3d() - це потужна функція трансформації CSS, яка дозволяє застосовувати складні 3D-перетворення до елементів на веб-сторінці. Вона працює з матрицями розміром 4x4, що дозволяє виконувати різні операції, такі як масштабування, обертання, зсув та зкос у тривимірному просторі.
Застосування функції matrix3d() дозволяє створювати вражаючі та складні 3D-ефекти, такі як перекручення, вигинання, деформація та перспективні ефекти. Ця функція надає великий ступінь контролю над 3D-трансформаціями та дозволяє створювати динамічні та реалістичні візуальні ефекти.
Функція matrix3d() вимагає 16 значень в матриці, які представляють різні перетворення. Перші 4 числа відповідають за масштабування та зкос по осях X, Y та Z. Наступні 4 числа відповідають за зсув по осях X, Y та Z. Потім йдуть 4 числа для обертання та зкосу елемента, а останні 4 числа відповідають за перспективні ефекти та зміщення.
Нижче наведений приклад використання функції matrix3d() для обертання елемента на 45 градусів навколо осі Z:
.element {
transform: matrix3d(
0.71, 0.71, 0, 0,
-0.71, 0.71, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
}
Цей приклад створює ефект обертання елемента навколо осі Z на 45 градусів. За допомогою функції matrix3d(), ви можете творити захоплюючі та складні 3D-ефекти, які піднімуть ваші веб-сторінки на новий рівень візуального досвіду.
- Порада
-
Використовуйте функцію
автор: Bondmatrix3d()для складних 3D-трансформацій, які неможливо досягти за допомогою інших функцій CSS. - Порада
-
Докладніше ознайомтесь з математичними принципами застосування 3D-матриць трансформацій для досягнення потрібного ефекту.
автор: Bond - Порада
-
Будьте уважними при використанні функції
автор: Bondmatrix3d(), оскільки складні трансформації можуть впливати на продуктивність та відображення елементів.
Синтаксис
matrix3d(n1, n2, n3, n4, n5, n6, n7, n8, n9, n10, n11, n12, n13, n14, n15, n16);Функція matrix3d може отримувати 3 значень:
-
<number> -
Ці числа представляють різні елементи матриці трансформації та можуть бути від'ємними, десятковими тощо.
автор: Bond -
<function> -
Функції, такі як deg(), rad(), turn(), можуть бути використані для задання кутів обертання.
автор: Bond -
<definition> -
Математичні вирази можуть бути використані для обчислення значень в межах функції
автор: Bondmatrix3d().
| Значення без задання: | matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 12 | 10 | 4 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 10 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
При наведенні курсору на елемент, він змінює свою позицію та масштаб у тривимірному просторі.
Два однакові елементи, але один з них має змінений масштаб після застосування функції matrix3d().
Коментарі
Коментарів ще немає — будьте першим!