CSS matrix() — усі 2D-трансформації одним записом

Опис

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(). Неправильні значення можуть призвести до небажаних результатів.

автор: Bond правити

Порада

Зверніть увагу на порядок застосування трансформацій. Він може вплинути на кінцевий результат.

автор: Bond правити

Нотатка

За допомогою функції matrix() можна комбінувати різні типи трансформацій для створення складних ефектів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

matrix(a, b, c, d, tx, ty);

Функція matrix може отримувати єдине значення:

<number>

Числові значення. Зазвичай вони знаходяться в діапазоні від -∞ до +∞.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	3.5	3.1	10.5	12	9

Підтримка: мобільні переглядачі

Переглядач
	2	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 2: 2D-трансформація за допомогою функції matrix()</h2>
  <p>Два однакові елементи, але один з них має змінені параметри 2D-трансформації після застосування функції matrix().</p>
</div>

<div id="result">
  <div class="element"></div>
  <div class="element transformed"></div>
</div>

#description {
  background: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.element {
  width: 100px;
  height: 100px;
  background-color: #ff6347;
  margin-right: 20px;
}

.transformed {
  background-color: #6495ed;
  transform: matrix(0.8, 0.2, -0.2, 0.8, 0, 0);
}

<div id="description">
  <h2>Приклад 1: зміна елемента за допомогою функції matrix()</h2>
  <p>При наведенні курсору на елемент, він змінює свою позицію та масштаб.</p>
</div>

<div id="result">
  <div class="element"></div>
</div>

#description {
  background: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.element {
  width: 100px;
  height: 100px;
  background-color: #ff6347;
  transition: transform 0.3s ease;
}

.element:hover {
  transform: matrix(1.2, 0, 0, 1.2, 20, 20);
}

<div id="description">
  <h2>Матриця — це те саме перетворення</h2>
  <p>Синій квадрат повернуто й збільшено звичайними функціями, помаранчевий — тими самими числами в matrix(). Зелений показує чистий скіс.</p>
</div>

<div id="result">
  <div class="cell">
    <div class="sq fn"></div>
    <p>transform: rotate(30deg) scale(1.2)</p>
  </div>
  <div class="cell">
    <div class="sq mx"></div>
    <p>transform: matrix(1.03923, 0.6, -0.6, 1.03923, 0, 0)</p>
  </div>
  <div class="cell">
    <div class="sq sk"></div>
    <p>transform: matrix(1, 0, 0.4, 1, 0, 0)</p>
  </div>
</div>

#description {
  background: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 40px 24px;
  font-family: Arial, sans-serif;
}

.cell {
  width: 200px;
  text-align: center;
}

.sq {
  width: 90px;
  height: 90px;
  margin: 0 auto 18px;
  border-radius: 6px;
}

.fn {
  background: #4169e1;
  transform: rotate(30deg) scale(1.2);
}

.mx {
  background: #ff6347;
  transform: matrix(1.03923, 0.6, -0.6, 1.03923, 0, 0);
}

.sk {
  background: #2e8b57;
  transform: matrix(1, 0, 0.4, 1, 0, 0);
}

.cell p {
  font-size: 12px;
  color: #555;
  margin: 0;
}