CSS від А до Я: робота з трансформаціями по осі Y і матрицями

2

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі матрицями та трансформаціями по осі Y.

Y означає трансформації по осі Y-матриці

Ми можемо виконувати різні трансформації з елементами по різних осях. У цьому уроці ми швидко пробіжимося по всіх стандартних опцій, після чого розглянемо менш відомі значення властивості transform, з допомогою яких можна задавати декілька значень за раз за допомогою matrix().

Властивість transform і вісь Y

У відеоуроці основний упор був зроблений на rotateY(), і я подумав, що було б непогано розібрати інші значення трансформацій по вертикальній осі. Нам доступні наступні трансформації:

transform: translateY(100px)

transform: rotateY(45deg)

transform: scaleY(1.5)

transform: skewY(30deg)

Значення прив’язані до осі Y. Їх можна використовувати для спілкування один з одним, так як за вертикальної осі за один раз можна застосувати тільки одне значення.

До 3D трансформацій можна віднести тільки rotateY(), коли елемент обертається уздовж вертикальної осі. Якщо ви працюєте з 3D трансформаціями, переконайтеся, що для батьківського елемента задано властивість style:preserve-3d.

Множинні трансформації

Якщо вам необхідно об’єднати кілька трансформацій, ви можете зробити це, розділивши пробілом кілька функцій. Приклад нижче об’єднує translate і skew:

.element {
transform: translateY(50px) skew(30deg);
}

Все б нічого, але використовувати таку трансформацію в анімації або плавному переході буде досить важко, так як кожен етап трансформації необхідно помістити в окремий стан або keyframe. Існує і більш складний, але і більш потужний спосіб установки декількох трансформацій за допомогою значення matrix().

Створюємо складну трансформацію за допомогою matrix()

Matrix() – значення, за допомогою якого можна за один раз задати scale, skew та translate, передавши 6 числових параметрів.

.element {
transform: matrix(a, b, c, d, e, f);
}

В основі способу лежать досить складні математичні обчислення, від яких у мене кожен раз починає боліти голова. Замість того щоб пояснювати математичні матриці, скалярний добуток і вектори, давайте розберемо, що означає кожен параметр matrix().

Якщо ви хочете більш докладно вивчити метод, прочитайте цю статтю. У коді вище я позначив всі аргументи матриці символи від a до f. Символи a і d задають горизонтальний і вертикальний масштаб. Символи b і c задають горизонтальний і вертикальний нахил. Символи e і f задають горизонтальне і вертикальне зміщення.

Єдина складність з matrix() полягає в тому, що всі аргументи задаються числами, а не одиницями вимірювання довжини. До одиниць вимірювання довжини можна віднести значення 100px або 30deg, але матриці розуміють тільки числа.

Щоб продемонструвати вам роботу матриці, я створив демо. Перша фігура створена за допомогою декількох значень властивості transform, а друга – за допомогою матриці:

.one {
transform: scale(1.5, 1.5) skew(10deg, 10deg) translate(100px, -50px);
}
.two {
transform: matrix(1.5, 0.26449, 0.26449, 1.5, 136.775, -48.551);
}

Значення matrix() дуже зручно для встановлення кількох значень за раз, проте його дуже незручно читати. Круто, якщо ви вираховуєте всі компоненти матриці через JS, але писати від руки це дуже складно. Якщо вас зацікавили матриці, і ви хотіли б вивчити їх детальніше, можете проінспектувати будь трансформований елемент і подивитися на вкладку обчислені стилі. Там ви побачите повну матрицю трансформацій.