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() дозволяє легко трансформувати та анімувати елементи на сторінці, надаючи вам більше контролю над їхнім зовнішнім виглядом та позицією.
- Порада
-
Переконайтеся, що правильно використовуєте значення для кожного параметра функції
автор: Bondmatrix(). Неправильні значення можуть призвести до небажаних результатів. - Порада
-
Зверніть увагу на порядок застосування трансформацій. Він може вплинути на кінцевий результат.
автор: Bond - Нотатка
-
За допомогою функції
автор: Bondmatrix()можна комбінувати різні типи трансформацій для створення складних ефектів.
Синтаксис
matrix(a, b, c, d, tx, ty);Функція matrix може отримувати єдине значення:
-
<number> -
Числові значення. Зазвичай вони знаходяться в діапазоні від
автор: Bond-∞до+∞.
| Значення без задання: | (1, 0, 0, 1, 0, 0) |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
При наведенні курсору на елемент, він змінює свою позицію та масштаб.
Два однакові елементи, але один з них має змінені параметри 2D-трансформації після застосування функції matrix().
Коментарі
Коментарів ще немає — будьте першим!