CSS function matrix()
Опис
matrix() - це потужна функція трансформації CSS, яка дозволяє вам застосовувати складні перетворення до елементів на веб-сторінці. Вона використовує матрицю розміром 3x2 для визначення таких параметрів, як масштабування, обертання, зсув та зкос.
Всі параметри функції matrix() приймають числові значення, що представляють різні типи трансформацій. Застосування цієї функції може бути корисним у випадках, коли потрібно виконати складні анімації, перетворення чи трансформації елементів на сторінці.
Наприклад, якщо вам потрібно масштабувати елемент без зміни його форми та зсунути його на 100 пікселів вправо та 50 пікселів вгору, ви можете використовувати такий код:
.element {
transform: matrix(1, 0, 0, 1, 100, -50);
}
У цьому прикладі функція matrix() встановлює параметри масштабування (a та d) на 1 (без зміни масштабу), параметри зкосу (b та c) на 0 (без зкосу) та параметри зсуву (tx та ty) на 100 пікселів вправо та 50 пікселів вгору.
Застосування функції matrix() дозволяє легко трансформувати та анімувати елементи на сторінці, надаючи вам більше контролю над їхнім зовнішнім виглядом та позицією.
| Порада: | Переконайтеся, що правильно використовуєте значення для кожного параметра функції |
| Нотатка: | За допомогою функції |
| Порада: | Зверніть увагу на порядок застосування трансформацій. Він може вплинути на кінцевий результат. |
Синтаксис
matrix(a, b, c, d, tx, ty);<number>Числові значення. Зазвичай вони знаходяться в діапазоні від
-∞до+∞.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
3.5 |
3.1 |
10.5 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
2 |
18 |
4 |
3.2 |
Мобільних переглядачів ще не додано.
Приклади
При наведенні курсору на елемент, він змінює свою позицію та масштаб.
Два однакові елементи, але один з них має змінені параметри 2D-трансформації після застосування функції matrix().