Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам "по сердцу", особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.

transform

CSS-свойство transform подразумевает использование одной или нескольких функций:

  1. Масштабирование элемента scale()
  2. Поворот rotate()
  3. Скос элемента skew()
  4. Смещение translate()
  5. Комбинация этих функций
  6. Функция matrix().

Масштабирование элемента - функция scale()

По умолчанию функция scale()  имеет значение 1, т.е. transform: scale(1) - это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5) , либо уменьшают scale(.5). Со значением -1 вы получите зеркальное отражение, причем по обеим осям.

Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):

Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:

Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):

Как это выглядит на практике можно посмотреть в примере ниже:

See the Pen CSS Transform by Elen (@ambassador) on CodePen.

Поворот rotate()

Для того чтобы повернуть элемент, необходимо использовать функцию rotate(угол). Угол можно указывать в нескольких единицах:

  • В градусах (deg). Наиболее часто используемая единица измерения. Полный круг равен 360deg.
  • В градах (grad). Полный круг равен 400grad,
  • В радианах (rad). Полный круг равен 2π или примерно 6.2832rad.
  • В поворотах (turn). Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.

В коде использование этой функции будет выглядеть так:

Посмотреть примеры:

See the Pen CSS-property transform: rotate() by Elen (@ambassador) on CodePen.

Обратите внимание на последний пример: при повороте текст элемента поворачивается в ту же сторону, что и сам элемент. Если же текст нужно "вернуть на место", то для вложенного элемента нужно задать такой же угол поворота, но с отрицательным значением:

Скос элемента - функция skew()

В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():

Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая - по оси X, вторая - по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.

Наглядная демонстрация использования трансформации скоса (наклона) в примере:

See the Pen CSS transform: skew() by Elen (@ambassador) on CodePen.

Смещение translate()

Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.

При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо - при положительных значениях, влево - при отрицательных значениях). Можно указать 2 параметра - тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции  translateX() или  translateY() для горизонтального и вертикального смещения:

See the Pen CSS-property transform: translate() by Elen (@ambassador) on CodePen.

Комбинация функций в свойстве transform

Достаточно часто приходится комбинировать 2 или 3 функции свойства transform. В этом случае следует указывать функции в свойстве transform через пробел, а не писать их несколько друг под другом.

See the Pen CSS transform: several functions by Elen (@ambassador) on CodePen.

Обратите внимание, что в зависимости от того, в какой последовательности перечислены свойства, эффект трансформации, возникающий при наведении, может быть разным.

Альтернативой указанию нескольких свойств служит функция matrix().

Функция matrix()

Функция matrix() предполагает использование 6 коэффициентов, т.е. чисел без указания единиц измерения вроде %, px, em, deg и т.п. внутри круглых скобок: transform: matrix(a, b, c, d, tx, ty). По умолчанию элемент имеет такие значения этого свойства:

Матрица смещения

Значения tx и ty — значения, на которые должно быть сдвинуто начало координат. Мы также можем представить это с помощью вектора [1 0 0 1 tx ty]. Вместо tx, ty необходимо подставить значения.

Матрица масштабирования

За масштабирование по X отвечает первый коэффициент a, за масштабирование по Y - 4-ый коэффициент d. Поэтому при изменении этих цифр, произойдет изменение масштаба по горизонтальной и вертикальной осям:

Матрица наклона

За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента.

Матрица поворота

Поворот определяется в виде косинусов и синусов в первых 4-х коэффициентах. Например, поворот против часовой стрелки на 45 градусов будет выражен следующим кодом:

Посмотреть на примерах:

See the Pen CSS transform: matrix() by Elen (@ambassador) on CodePen.

Достаточно сложно, не так ли? Поэтому в практике довольно редко используют это свойство, хотя браузеры рассчитывают все трансформации с его помощью без проблем. Для того чтобы не сушить мозги с коэффициентами, имеет смысл использовать онлайн-генераторы этого свойства, например такой:

Почитать о матрицах:

Центр трансформации

По умолчанию все трансформации элемента происходят относительно точки, расположенной в его центре. Собственно, также это происходит и в Photoshop, и в Illustrator. Но если в графических программах эту точку можно переместить визуально, то в css-свойствах за ее положение отвечает transform-origin:

Значение этого свойства по умолчанию: center, или 50% 50%. Задание в свойстве transform-origin: 20px 100px; например, помещает начало координат в 20 пикселей от левого края объекта и в 100 пикселей от его верха. Трансформации каждой точки в локальной системе координат объекта рассчитываются относительно этого центра.

Вы можете задавать координаты центр трансформации с помощью ключевых слов:

  • по горизонтали: left, center, right
  • по вертикали: top, center, bottom

Посмотрите на разницу в отображении трансформации относительно точки трансформации, которая расположена в различных координатах:

See the Pen CSS property transform-origin by Elen (@ambassador) on CodePen.

Еще раз посмотреть все варианты трансформаций вы можете в примере ниже:

See the Pen Css3 Transform by Elen (@ambassador) on CodePen.

Практический пример использования трансформаций и hover-эффектов

Очень часто свойство transform используется для создания анимационных эффектов при наведении на элемент в сочетании со свойством transition.  Ниже приведен пример, в котором при наведении на блок с текстом и картинкой происходит небольшое смещение этого блока вниз (transform: translateY(10px)) и увеличение картинки с небольшим ее поворотом (transform: scale(1.3) rotate(-7deg)):

Все стили вы можете посмотреть на вкладке CSS, а разметку - на вкладке HTML. Для того чтобы поворот картинки не был заметен, она помещена в div-обертку, для которого назначено свойство overflow: hidden. Поэтому все, что выходит за пределы этого div-а, обрезается.

See the Pen CSS transition and transform by Elen (@ambassador) on CodePen.

Пример создания различных фигур на основе свойства transform и border

Вы можете "нарисовать" с помощью css различные фигуры - от ромба до сердца. Для этого вам понадобится не только свойство transform, но и свойство border для псевдоэлементов ::before и/или ::after.

See the Pen shapes with css-transform property by Elen (@ambassador) on CodePen.

Пример с картами

В этом примере вы найдете варианты использования свойства transform не только для самих карт, но и для их мастей, причем стили написаны и для элементов, и для псевдоэлементов.

See the Pen CSS Aces by Suzanne Aitchison (@aitchiss) on CodePen.

Пример оформления блока

See the Pen Stacked cards by Ishaan Sheikh (@sheikh_ishaan) on CodePen.

Вариант для css-логотипа из квадратов

See the Pen Neon-2 by Yuhomyan (@yuhomyan) on CodePen.

Пример с переворотом карточек на основе свойства transform

See the Pen Pure CSS Flip Card by Aron (@aron-tw) on CodePen.

Автор: Админ

2 комментария

  1. Это просто шедевральное описание!!! Увидишь ли ты, создатель сего сайта, мой коммент, но я долго искал вот такой разложенный по полочкам материал, как у вас в статье! Наглядно проиллюстрировано и очень понятным языком всё расписано. Я вам очень благодарен!

    • Edward, спасибо! Так приятно, что кто-то оценил твой труд!
      Есть желание продолжать писать статьи.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *