От автора: приветствую вас в нашей серии уроков 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:
|
1 2 3 |
.element { transform: translateY(50px) skew(30deg); } |
Все бы ничего, но использовать такую трансформацию в анимации или плавном переходе будет довольно затруднительно, так как каждый этап трансформации необходимо поместить в отдельное состояние или keyframe. Существует и более сложный, но и более мощный способ установки нескольких трансформаций при помощи значения matrix().
Создаем сложную трансформацию с помощью matrix()
Matrix() – значение, с помощью которого можно за один раз задать scale, skew и translate, передав 6 числовых параметров.
|
1 2 3 |
.element { transform: matrix(a, b, c, d, e, f); } |
В основе способа лежат довольно сложные математические вычисления, от которых у меня каждый раз начинает болеть голова. Вместо того чтобы объяснять математические матрицы, скалярное произведение и векторы, давайте разберем, что означает каждый параметр matrix().
Если вы хотите более подробно изучить метод, прочитайте эту статью. В коде выше я пометил все аргументы матрицы символами от a до f. Символы a и d задают горизонтальный и вертикальный масштаб. Символы b и c задают горизонтальный и вертикальный наклон. Символы e и f задают горизонтальное и вертикальное смещение.
Единственная сложность с matrix() заключается в том, что все аргументы задаются числами, а не единицами измерения длины. К единицам измерения длины можно отнести значения 100px или 30deg, но матрицы понимают только числа.
Чтобы продемонстрировать вам работу матрицы, я создал демо. Первая фигура создана при помощи нескольких значений свойства transform, а вторая – при помощи матрицы:
|
1 2 3 4 5 6 |
.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, но писать от руки это очень сложно. Если вас заинтересовали матрицы, и вы хотели бы изучить их поподробнее, можете проинспектировать любой трансформированный элемент и посмотреть на вкладку вычисленные стили. Там вы увидите полную матрицу трансформаций.
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
