В этом уроке мы рассмотрим различные двухмерные трансформаций, которые можно реализовать при помощи свойств CSS.
Общий синтаксис трансформации: transform: функция трансформации(значение трансформации);
Функция translateX - позволяет перемещать объекты по горизонтали, т.е. по оси x.
Например, следующая запись сдвинет элемент вправо на 200 пикселей: transform: translateX(200px);
Если значение трансформации задать отрицательным, то элемент сдвинется влево.
Из единиц измерения обычно применяются px или %.
Функция translateY - позволяет перемещать объекты по вертикали, т.е. по оси y.
Принцип тот же – положительное значение сдвигает объект вниз, отрицательное вверх.
transform: translateY(200px) – сдвиг на 200 пикселей вниз.
transform: translateY(-200px) – сдвиг на 200 пикселей вверх.
Если Вам необходимо сдвинуть объект одновременно, например, и вправо и вниз, то вариантов есть несколько.
Один из них – это в свойстве transform перечислить 2 функции:
transform: translateX(200px) translateY(200px)
Но есть более удобный способ – это использовать специальную функцию translate, которая принимает два параметра и объединяет перемещение сразу по двум осям: transform: translate(200px, 200px);
В этой функции 2 значения просто перечисляются через запятую, причём второе значение, которое определяет смещение по оси Y, является необязательным для указания. Если его не указать, то значение перемещения по Y будет считаться равным 0 и функция будет работать аналогично translateX.
Функции семейства scale – масштабирование элементов
Ещё одной возможностью CSS-трансформаций является масштабирование блоков. С помощью функции scale можно увеличивать или уменьшать элементы.
Значением этой функции может быть любое число. При этом значение 1 считается точкой отсчёта, когда блок имеет оригинальные размеры. Например:
- scale(0.5) уменьшит объект в 2 раза;
- scale(2) увеличит объект в 2 раза;
- scale(0) полностью «схлопнет» объект, и его не будет видно;
- scale(1) оставит объект без изменений.
Функция scale может принимать 2 аргумента: scale(масштаб-по-X , масштаб-по-Y).
Если масштаб по Y не задан, то считается, что он такой же, как масштаб по X.
Если необходимо масштабировать объект только по одной оси независимо от другой, то можно использовать функции scaleX(масштаб-по-Х) и scaleY(масштаб-по-Y).
Интересная особенность функции scale при задании ей отрицательных числовых значений. Например, при задании scaleX(-1) элемент зеркально отразится по горизонтали, а при scale(-1, -1) – отразится и по оси X, и по оси Y. Значение больше, чем -1, ещё шире растянет отраженный элемент.
Функция поворота rotate
Функция rotate принимает параметром цифровое значение вида «90deg». Положительное значение угла повернёт объект по часовой стрелке, а отрицательное - против. Единица измерения поворота - градусы deg, например: transform: rotate(180deg) повернёт объект на 180° по часовой стрелке, то есть перевернёт его.
При совместном применении трансформации поворота и перемещения есть небольшая тонкость. При повороте вместе с объектом на заданный угол поворачивается и вся его система координат. Поэтому, чтобы повёрнутый на 90° блок двигать по горизонтали, нужно применять translateY, а по вертикали - translateX.
Функции семейства skew - наклон объекта по осям X и Y под заданным углом
Угол наклона задаётся в градусах - deg. Например:
transform: skewX(45deg)
transform: skewY(30deg)
Для оси X положительное значение угла наклоняет объект влево, а отрицательное - вправо. Для оси Y - вниз и вверх соответственно.
Свойство transform-origin – смещение точки отсчета
transform-origin используется совместно со свойством transform и задаёт точку отсчёта системы координат, в рамках которой будет работать трансформация.
transform-origin: точка-отсчёта-по-X [, точка-отсчёта-по-Y]
Значения свойства задаётся в единицах измерения ширины в браузере (px, em…), в %, а также ключевыми словами left, right, top, bottom и center.
По умолчанию, значение transform-origin равно 50% 50%, то есть начало системы координат находится в центре объекта. Если не указывать значение точки отсчёта по оси Y, то оно считается равным 50%.
Функция поворота rotate
Функция rotate принимает параметром цифровое значение вида «90deg». Положительное значение угла повернёт объект по часовой стрелке, а отрицательное - против. Единица измерения поворота - градусы deg, например: transform: rotate(180deg) повернёт объект на 180° по часовой стрелке, то есть перевернёт его.
При совместном применении трансформации поворота и перемещения есть небольшая тонкость. При повороте вместе с объектом на заданный угол поворачивается и вся его система координат. Поэтому, чтобы повёрнутый на 90° блок двигать по горизонтали, нужно применять translateY, а по вертикали - translateX.
Функции семейства skew - наклон объекта по осям X и Y под заданным углом
Угол наклона задаётся в градусах - deg. Например:
transform: skewX(45deg)
transform: skewY(30deg)
Для оси X положительное значение угла наклоняет объект влево, а отрицательное - вправо. Для оси Y - вниз и вверх соответственно.
Свойство transform-origin – смещение точки отсчета
transform-origin используется совместно со свойством transform и задаёт точку отсчёта системы координат, в рамках которой будет работать трансформация.
transform-origin: точка-отсчёта-по-X [, точка-отсчёта-по-Y]
Значения свойства задаётся в единицах измерения ширины в браузере (px, em…), в %, а также ключевыми словами left, right, top, bottom и center.
По умолчанию, значение transform-origin равно 50% 50%, то есть начало системы координат находится в центре объекта. Если не указывать значение точки отсчёта по оси Y, то оно считается равным 50%.