CSS transform — rotate, scale, translate, skew

transform перемещает, поворачивает, масштабирует и наклоняет элемент, не меняя поток документа. Это ключевое свойство для анимаций — transform работает на GPU и не вызывает reflow страницы.

Содержание

translate — перемещение элемента
rotate — поворот
scale — масштабирование
skew — наклон
Комбинирование трансформаций
transform-origin — точка трансформации
3D трансформации — переворот карточки
Таблица всех функций transform
Часто задаваемые вопросы о CSS transform
Почему transform не работает на inline элементах?
Как повернуть текст в CSS?
transform vs position — что лучше для анимаций?

translate — перемещение элемента

/* По горизонтали */
div { transform: translateX(50px); }   /* вправо на 50px */
div { transform: translateX(-50px); }  /* влево на 50px */

/* По вертикали */
div { transform: translateY(30px); }   /* вниз на 30px */
div { transform: translateY(-30px); }  /* вверх на 30px */

/* По обеим осям */
div { transform: translate(50px, -30px); }  /* вправо 50, вверх 30 */
div { transform: translate(0, 20px); }      /* только вниз */

/* Проценты — от СОБСТВЕННОГО размера элемента */
div { transform: translateX(50%); }          /* сдвинуть на полширины */
div { transform: translate(-50%, -50%); }    /* назад на половину */

/* ✨ Классический паттерн: идеальное центрирование */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* top/left ставит левый верхний угол по центру */
  /* translate(-50%, -50%) сдвигает назад на половину ширины/высоты */
}

/* Hover lift — карточка поднимается */
.card {
  transition: transform 0.2s ease;
}
.card:hover {
  transform: translateY(-6px);
}

CSS translate сдвигает элемент вправо и вверх, исходное место показано пунктирной рамкой — translate перемещает элемент визуально: место в потоке остаётся там, где пунктирная рамка.

rotate — поворот

/* Градусы */
div { transform: rotate(45deg); }   /* по часовой стрелке */
div { transform: rotate(-45deg); }  /* против часовой */
div { transform: rotate(90deg); }   /* четверть оборота */
div { transform: rotate(180deg); }  /* вверх ногами */

/* Другие единицы */
div { transform: rotate(0.5turn); }  /* пол-оборота = 180deg */
div { transform: rotate(1rad); }     /* радианы (~57.3deg) */

/* 3D повороты */
div { transform: rotateX(30deg); }  /* наклон назад/вперёд (X-ось) */
div { transform: rotateY(45deg); }  /* поворот влево/вправо (Y-ось, карусель) */
div { transform: rotateZ(45deg); }  /* = rotate(45deg) */

/* Практические примеры */

/* Стрелка аккордеона раскрывается */
.arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.accordion.open .arrow {
  transform: rotate(180deg);
}

/* Иконка меню (гамбургер) → X */
.burger-line-1.open { transform: rotate(45deg) translate(6px, 6px); }
.burger-line-2.open { transform: scaleX(0); }
.burger-line-3.open { transform: rotate(-45deg) translate(6px, -6px); }

CSS rotate показывает поворот карточки на 35 градусов вокруг центра и сравнение разных углов — rotate() поворачивает элемент вокруг transform-origin, по умолчанию это центр элемента.

scale — масштабирование

/* Масштаб 1 = исходный размер */
div { transform: scale(1.5); }    /* увеличить в 1.5 раза */
div { transform: scale(2); }      /* в 2 раза */
div { transform: scale(0.5); }    /* уменьшить вдвое */
div { transform: scale(0); }      /* исчезнуть */

/* Отдельные оси */
div { transform: scaleX(2); }     /* только по ширине */
div { transform: scaleY(0.5); }   /* только по высоте */
div { transform: scale(2, 0.5); } /* ширина × 2, высота × 0.5 */

/* Отрицательные значения — зеркало */
div { transform: scaleX(-1); }    /* зеркальное отражение по горизонтали */
div { transform: scaleY(-1); }    /* перевернуть вертикально */

/* Практические примеры */

/* Увеличение при hover */
.gallery-img {
  transition: transform 0.3s ease;
}
.gallery-img:hover {
  transform: scale(1.05);
}

/* Кнопка нажата */
.btn:active {
  transform: scale(0.96);
}

/* Появление через scale */
@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.modal {
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

CSS scale сравнение scale 0.5, 1, 1.4 и scaleX -1 для зеркального отражения — scale() визуально меняет размер элемента; соседние блоки при этом не получают новый размер.

skew — наклон

div { transform: skewX(20deg); }         /* наклон по X — как курсив */
div { transform: skewY(10deg); }         /* наклон по Y */
div { transform: skew(20deg, 10deg); }   /* обе оси */

/* Декоративный наклон секции */
.hero {
  transform: skewY(-3deg);
  margin-bottom: -50px;
}

.hero > * {
  transform: skewY(3deg);  /* контент возвращаем обратно */
}

CSS skew создает наклонную hero секцию, контент внутри выровнен обратной трансформацией — skew полезен для наклонных секций: фон наклоняется, а внутренний контент компенсируется обратным skew.

Комбинирование трансформаций

Несколько функций через пробел применяются слева направо. Порядок имеет значение: rotate потом translate ≠ translate потом rotate.

/* Несколько трансформаций */
div {
  transform: translateY(-10px) rotate(5deg) scale(1.05);
}

/* Порядок важен! */
/* rotate(45deg) translate(100px, 0) */
/* — двигает вправо ОТНОСИТЕЛЬНО повёрнутой системы координат */

/* translate(100px, 0) rotate(45deg) */
/* — поворачивает уже сдвинутый элемент */

/* Hover с несколькими эффектами */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

Сравнение порядка CSS transform: rotate затем translate и translate затем rotate дают разные позиции — Порядок функций transform важен: перестановка rotate и translate меняет финальную позицию элемента.

transform-origin — точка трансформации

/* По умолчанию: center center (50% 50%) */
div { transform-origin: center; }
div { transform-origin: top left; }
div { transform-origin: bottom right; }
div { transform-origin: 0 0; }          /* левый верхний угол */
div { transform-origin: 100% 100%; }    /* правый нижний угол */
div { transform-origin: 50% 0; }        /* верхний центр */
div { transform-origin: 20px 30px; }    /* конкретные координаты */

/* Примеры с transform-origin */

/* Раскрытие/закрытие от верхнего края */
.dropdown {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 0.2s ease;
}
.dropdown.open {
  transform: scaleY(1);
}

/* Стрелка вращается от правого края */
.expand-icon {
  transform-origin: right center;
  transition: transform 0.3s;
}
.expanded .expand-icon {
  transform: rotate(-90deg);
}

CSS transform-origin сравнивает center, top left и bottom right как точки вращения элемента — transform-origin задаёт точку, относительно которой работает rotate, scale и часть 3D-трансформаций.

3D трансформации — переворот карточки

/* Полный пример 3D flip карточки */
.card-3d-wrapper {
  perspective: 1000px;  /* глубина 3D пространства */
  width: 300px;
  height: 400px;
}

.card-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;  /* дети остаются в 3D */
  transition: transform 0.6s ease;
}

.card-3d-wrapper:hover .card-3d {
  transform: rotateY(180deg);  /* переворот при hover */
}

.card-3d-front,
.card-3d-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;  /* скрыть обратную сторону */
  border-radius: 16px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-3d-front {
  background: #2563eb;
  color: white;
}

.card-3d-back {
  background: #1d4ed8;
  color: white;
  transform: rotateY(180deg);  /* изначально повёрнута — не видна */
}

CSS 3D transform карточка flip с perspective transform-style preserve-3d и backface-visibility — 3D flip собирается из perspective, transform-style: preserve-3d, rotateY и backface-visibility.

Таблица всех функций transform

Функция	Описание	Пример
`translate(x, y)`	Перемещение	`translate(50px, -20px)`
`translateX(x)`	Только по горизонтали	`translateX(100px)`
`translateY(y)`	Только по вертикали	`translateY(-10px)`
`rotate(angle)`	Поворот 2D	`rotate(45deg)`
`rotateX(angle)`	Поворот вокруг X	`rotateX(30deg)`
`rotateY(angle)`	Поворот вокруг Y	`rotateY(180deg)`
`scale(n)`	Масштаб равномерно	`scale(1.5)`
`scaleX(n)`	Масштаб по X	`scaleX(2)`
`scaleY(n)`	Масштаб по Y	`scaleY(0.5)`
`skewX(angle)`	Наклон по X	`skewX(15deg)`
`skewY(angle)`	Наклон по Y	`skewY(10deg)`
`matrix()`	Матрица 2D (все вместе)	`matrix(a,b,c,d,tx,ty)`

Шпаргалка CSS transform: translate rotate scale skew matrix и 3D функции — Краткая таблица помогает выбрать transform-функцию под задачу: движение, поворот, масштаб, наклон или 3D.

Часто задаваемые вопросы о CSS transform

Почему transform не работает на inline элементах?

transform не применяется к строчным элементам с display: inline (например, span, a). Решение: измени тип отображения: display: inline-block, display: block или display: flex. После этого transform заработает.

Как повернуть текст в CSS?

Используй transform: rotate() на элементе с текстом. Для вертикального текста в таблице или сайдбаре: transform: rotate(-90deg). Или используй свойство writing-mode: vertical-rl — оно специально для изменения направления текста без трансформации.

/* Вариант 1: rotate */
.vertical-text {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Вариант 2: writing-mode (лучше для текста) */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

transform vs position — что лучше для анимаций?

transform всегда лучше для анимаций. Причины: 1) Работает в compositor thread на GPU — не вызывает reflow или repaint, анимация идёт в 60fps даже при нагруженном JavaScript. 2) Не влияет на поток документа — соседние элементы не двигаются. 3) will-change: transform подсказывает браузеру оптимизировать заранее. Избегай анимации через top/left/margin — это вызывает reflow и тормозит страницу.