Трансформации в CSS с примерами
- 21 мая 2023
CSS свойство transform
позволяет манипулировать элементами на вашей веб-странице, изменяя их форму, размер и положение.
👉 В общем виде свойство transform
записывается так: transform: функция(значение);
, где функция
— это тип преобразования, который вы хотите применить, а значение
— параметры этого преобразования.
Свойство transform
может принимать следующие значения:
none
— никакого преобразования не применяется.rotate(angle)
— вращает элемент на заданный угол.scale(x,y)
— масштабирует элемент по осям X и Y.translate(x,y)
— перемещает элемент на заданные координаты.skew(x-angle,y-angle)
— наклоняет элемент на заданные углы по осям X и Y.
Есть некоторые другие варианты преобразований, например, на основе матриц — смотрите их в спецификации. Но они для математиков всяких :)
Примеры использования
Вращение элемента — rotate
Свойство rotate
вращает элемент вокруг его центра.
div {
transform: rotate(20deg);
}
В этом примере элемент повернётся на 20 градусов по часовой стрелке (оси вы не увидите).

Масштабирование элемента — scale
Свойство scale
изменяет размер элемента.
div {
transform: scale(1.5);
}
Обратите внимание, при масштабировании изменяются все параметры элемента — например, рамка становится в полтора раза толще.

Перемещение элемента — translate
Свойство translate
позволяет вам перемещать элемент по экрану.
div {
transform: translate(50px, 100px);
}

Наклон элемента — skew
Свойство skew
позволяет вам наклонять элемент по осям X и Y — как если бы вы нажимали на его углы.
div {
transform: skew(20deg, 10deg);
}

Анимация превращений
Логично, что такую красоту используют для анимаций. transform
легко анимируется с помощью свойства transition
или ключевых кадров (@keyframes
).
Анимация с помощью transition
Свойство transition
позволяет анимировать плавное изменение свойств CSS от одного состояния к другому за определённое время. Вот пример анимации сдвига элемента при наведении курсора.
div {
transition: transform 2s;
}
div:hover {
transform: skew(20deg, 10deg);
}
В этом примере, когда вы наводите курсор на <div>
, он очень по-дизайнерски изгибается. Смотрите:
Анимация с помощью @keyframes
Свойство @keyframes
позволяет вам создавать более сложные анимации из нескольких частей. Вот пример анимации, где элемент сначала увеличивается в размере, затем вращается и сдвигается:
@keyframes example {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
70% { transform: rotate(30deg); }
100% { transform: skew(20deg, 10deg);}
}
div {
animation: example 4s infinite;
}
В этом примере <div>
сначала увеличивается в размере за 2 секунды, а затем вращается на 30 градусов за следующие 2 секунды, а в конце к нему применяется skew
. Этот цикл анимации повторяется бесконечно благодаря свойству infinite
.
Выходит, с помощью transform
вы можете вращать, масштабировать, перемещать и наклонять элементы, а также применять более сложные преобразования с помощью матриц. Свойство transition
помогает анимировать эти эффекты. Главное — не переборщить.
transform
не должен использоваться для изменения основной структуры веб-страницы. Он нужен для создания эффектов и анимаций, а не для основного макета страницы
Например, если вы захотите расставить элементы на странице с помощью translate
, то лучше не надо. Для этого лучше использовать другие CSS свойства, такие как flexbox
или grid
.
💡 Запомнить:
CSS свойство
transform
позволяет применять 2D и 3D преобразования к элементам.С помощью
transform
можно вращать, масштабировать, перемещать и наклонять элементы.Не все CSS свойства могут быть преобразованы с помощью
transform
.Вместе с
transition
получаются неплохие анимации. Главное — знать меру.
Материалы по теме
- Плавные трансформации на чистом CSS — свойство
transition
- Состояния элементов, чтобы анимировать не только при наведении курсора
- Как анимация портит ваши сайты — помните, что иногда анимаций бывает слишком много
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как создать тени на CSS: свойство box-shadow
Внутренние, внешние, с градиентом — на все случаи жизни.
- 28 мая 2023

Как работает transform в CSS на примерах
Интерактивная статья — попробуйте анимировать сами.
- 23 мая 2023

Как оформить текст: 11 главных CSS-свойств
Инструкция для любителей поиграться со шрифтами.
- 23 мая 2023



Как создать сетки на CSS Grid Layout
Чтобы сайт был красивым, а вёрстка не ломалась.
- 17 мая 2023

Плавные трансформации на чистом CSS. Свойство transition
Так плавно, что вы даже не заметите.
- 15 мая 2023

Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow
Чтобы текст и картинки не выпадали из блока.
- 14 мая 2023

Как отобразить элемент на странице. Свойство display
Блок или строчный элемент, а может что-то другое, выбор за вами.
- 13 мая 2023
