Трансформация объектов доступна в таких дизайнерских программах, как Adobe Photoshop или Adobe Illustrator, причем существует в них в незапамятных времен. Как css-свойство transform появилось только в версии CSS3, и сразу же пришлось многим верстальщикам "по сердцу", особенно в паре со свойством transition, позволяющим назначать анимацию средствами css.
transform
CSS-свойство transform подразумевает использование одной или нескольких функций:
- Масштабирование элемента scale()
- Поворот rotate()
- Скос элемента skew()
- Смещение translate()
- Комбинация этих функций
- Функция matrix().
Масштабирование элемента - функция scale()
По умолчанию функция scale() имеет значение 1, т.е. transform: scale(1)
- это нормальное состояние любого элемента. Поэтому при масштабировании объект обычно либо увеличивают scale(1.5)
, либо уменьшают scale(.5)
. Со значением -1 вы получите зеркальное отражение, причем по обеим осям.
1 2 3 4 5 6 7 8 9 | .box1 { transform: scale(1.5); } .box2 { transform: scale(.5); } .box3 { transform: scale(-1); } |
Если масштабирование необходимо выполнить по одной из осей, можно использовать функцию scaleX(значение) или scaleY(значение):
1 2 3 4 5 6 | .box4 { transform: scaleX(-.7); } .box5 { transform: scaleY(1.7); } |
Можно масштабировать элемент с разными пропорциями по оси X и Y сразу, указывая 2 значения через запятую в скобках:
1 2 3 | .box6 { transform: scale(1.2,1.6); } |
Также часто применяют масштабирование элементов вместе с анимацией (так называемые hover-эффекты, или эффекты при наведении):
1 2 3 4 5 6 | .box7 { transition: transform .7s; } .box7:hover { transform: scale(1.1); } |
Как это выглядит на практике можно посмотреть в примере ниже:
See the Pen CSS Transform by Elen (@ambassador) on CodePen.
Поворот rotate()
Для того чтобы повернуть элемент, необходимо использовать функцию rotate(угол). Угол можно указывать в нескольких единицах:
- В градусах (deg). Наиболее часто используемая единица измерения. Полный круг равен 360deg.
- В градах (grad). Полный круг равен 400grad,
- В радианах (rad). Полный круг равен 2π или примерно 6.2832rad.
- В поворотах (turn). Один круг равен одному повороту и пишется как 1turn. Отлично используется для анимации.
В коде использование этой функции будет выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .box1 { transform: rotate(45deg); } .box2 { transform: rotate(-.1turn); } .box3 { transform: rotateX(60deg); } .box4 { transform: rotateY(60grad); } .box5 { transition: transform 1s; } .box5:hover { transform: rotateY(1turn); } |
Посмотреть примеры:
See the Pen CSS-property transform: rotate() by Elen (@ambassador) on CodePen.
Обратите внимание на последний пример: при повороте текст элемента поворачивается в ту же сторону, что и сам элемент. Если же текст нужно "вернуть на место", то для вложенного элемента нужно задать такой же угол поворота, но с отрицательным значением:
1 2 3 4 5 6 7 8 9 10 | <style> .box6 { background: #ff0; transform: rotate(45deg); } .inner-box { transform: rotate(-45deg); } </style> <div class="box box6"><div class="inner-box">Text</div></div> |
Скос элемента - функция skew()
В градусах (deg), градах (grad) или радианах (rad) также измеряется и скос, или искажение сторон, элемента. За это преобразование отвечает функция skew():
1 2 3 4 | transform: skew(-30deg) skew(30deg, 15deg) skewX(40deg) skewY(40deg) |
Как видно из кода, вы можете задать скос (или наклон) элемента либо одной цифрой (он будет выполнен по по оси X), либо двумя (первая - по оси X, вторая - по оси Y), или задать явно, по какой оси нужен скос, используя функции skewX или skewY.
Наглядная демонстрация использования трансформации скоса (наклона) в примере:
See the Pen CSS transform: skew() by Elen (@ambassador) on CodePen.
Смещение translate()
Очень удобное свойство, которое позволяет смещать элементы, которые не позиционированы абсолютно или относительно. В качестве аргументов можно указывать число в %, px, em, rem и т.п., причем как положительные, так и отрицательные. В случае использования % величина смещения берется от ширины или высоты элемента.
При использовании функции translate() с одним параметром смещение будет происходить по горизонтали (вправо - при положительных значениях, влево - при отрицательных значениях). Можно указать 2 параметра - тогда смещение будет и по горизонтали, и по вертикали одновременно. Для того чтобы сместить элемент по одной из осей, можно использовать функции translateX() или translateY() для горизонтального и вертикального смещения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .box1 { transform: translate(-45px); } .box2 { transform: translate(20%, 20%); } .box3 { transform: translateX(2em); } .box4 { transform: translateY(3rem); } .box5 { transition: transform .7s; } .box5:hover { transform: translate(3rem, 2em); } |
See the Pen CSS-property transform: translate() by Elen (@ambassador) on CodePen.
Комбинация функций в свойстве transform
Достаточно часто приходится комбинировать 2 или 3 функции свойства transform. В этом случае следует указывать функции в свойстве transform через пробел, а не писать их несколько друг под другом.
1 2 3 4 5 6 7 8 9 10 11 | .circle1:hover { transform: scale(1.5) rotate(90deg) translateY(-50px); } .circle2:hover { transform: translateY(-50px) rotate(90deg) scale(1.5) ; } .circle3:hover { transform: scale(1.5);/* неверно, выпонится только последняя трансформация */ transform: rotate(90deg); /* неверно, выпонится только последняя трансформация */ transform: translateY(-50px); } |
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)
. По умолчанию элемент имеет такие значения этого свойства:
1 | .elem { transform: matrix(1, 0, 0, 1, 0, 0); } |
Матрица смещения
Значения tx
и ty
— значения, на которые должно быть сдвинуто начало координат. Мы также можем представить это с помощью вектора [1 0 0 1 tx ty]
. Вместо tx, ty необходимо подставить значения.
1 2 3 4 | .box1 { transform: matrix(1, 0, 0, 1, 80, 80); /*аналогично свойству transform: translate(80px,80px); */ } |
Матрица масштабирования
За масштабирование по X отвечает первый коэффициент a, за масштабирование по Y - 4-ый коэффициент d. Поэтому при изменении этих цифр, произойдет изменение масштаба по горизонтальной и вертикальной осям:
1 2 3 4 | .box3 { transform: matrix(.7, 0, 0, 2, 0, 0); /*аналогично свойству transform: scale(.7, 2); */ } |
Матрица наклона
За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента.
1 2 3 4 5 6 | .box5 { background: pink; transform: matrix(1, 0, -0.5, 1, 0, 0); /* аналог - свойство skew */ /* transform: skew(-30deg);*/ } |
Матрица поворота
Поворот определяется в виде косинусов и синусов в первых 4-х коэффициентах. Например, поворот против часовой стрелки на 45 градусов будет выражен следующим кодом:
1 2 3 4 5 | .box7 { transform: matrix(.71, -.71,.71, 0.71, 0, 0); /* аналог - функция rotate() */ /* transform: rotate(-45deg); */ } |
Посмотреть на примерах:
See the Pen CSS transform: matrix() by Elen (@ambassador) on CodePen.
Достаточно сложно, не так ли? Поэтому в практике довольно редко используют это свойство, хотя браузеры рассчитывают все трансформации с его помощью без проблем. Для того чтобы не сушить мозги с коэффициентами, имеет смысл использовать онлайн-генераторы этого свойства, например такой:
Почитать о матрицах:
- Матрица преобразований
- Изучаем матрицы трансформаций в CSS
- CSS Generator - Transform
- CSS3 Generator transform: matrix3d
Центр трансформации
По умолчанию все трансформации элемента происходят относительно точки, расположенной в его центре. Собственно, также это происходит и в Photoshop, и в Illustrator. Но если в графических программах эту точку можно переместить визуально, то в css-свойствах за ее положение отвечает transform-origin
:
1 2 3 4 5 | transform-origin: center; transform-origin: 50% 50%; transform-origin: 20px 100px; transform-origin: 3em 1.2rem; transform-origin: 35px 2em; |
Значение этого свойства по умолчанию: 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)
):
1 2 3 4 5 6 7 8 9 10 11 12 | .box img { display: block; max-width: 100%; transition: transform .7s; } .box:hover img{ transform: scale(1.3) rotate(-7deg); } .box:hover { box-shadow: 0 3px 20px rgba(0,0,0,.6); transform: translateY(10px); } |
Все стили вы можете посмотреть на вкладке 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.
Это просто шедевральное описание!!! Увидишь ли ты, создатель сего сайта, мой коммент, но я долго искал вот такой разложенный по полочкам материал, как у вас в статье! Наглядно проиллюстрировано и очень понятным языком всё расписано. Я вам очень благодарен!
Edward, спасибо! Так приятно, что кто-то оценил твой труд!
Есть желание продолжать писать статьи.