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

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

Порада:

Використовуйте функцію matrix3d() для складних 3D-трансформацій, які неможливо досягти за допомогою інших функцій CSS.
Порада:

Докладніше ознайомтесь з математичними принципами застосування 3D-матриць трансформацій для досягнення потрібного ефекту.
Порада:

Будьте уважними при використанні функції matrix3d(), оскільки складні трансформації можуть впливати на продуктивність та відображення елементів.

Синтаксис

matrix3d(n1, n2, n3, n4, n5, n6, n7, n8, n9, n10, n11, n12, n13, n14, n15, n16);
<number>

Ці числа представляють різні елементи матриці трансформації та можуть бути від'ємними, десятковими тощо.

<function>

Функції, такі як deg(), rad(), turn(), можуть бути використані для задання кутів обертання.

<definition>

Математичні вирази можуть бути використані для обчислення значень в межах функції matrix3d().

Переглядачі

Переглядач

12

10

4

15

12
Переглядач

3

18

10

3.2

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

Приклади


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

Два однакові елементи, але один з них має змінений масштаб після застосування функції matrix3d().

Спільнота

Зв'язок