transform: rotate, scale, translate

transform — CSS-свойство, которое применяет 2D- и 3D-трансформации к элементу: перемещение, вращение, масштабирование, наклон — без влияния на layout (не сдвигает соседние элементы).

Зачем нужно

transform позволяет визуально изменять элемент без перерасчёта layout, что делает его идеальным для анимаций. Трансформации выполняются на GPU, обеспечивая 60fps. Элемент занимает прежнее место в потоке — сдвигается только его визуальное представление. top/left анимация — дорогостоящая операция; translate — быстрая.

Где используется

  • Hover-эффекты (увеличение, сдвиг, поворот)
  • Анимации появления и исчезновения (translateY)
  • Центрирование элементов (translate + position)
  • 3D-эффекты (карточки с переворотом, перспектива)
  • Параллакс-эффекты
  • Вращение иконок и стрелок (аккордеон, раскрытие)
  • Создание spinner-ов (rotate)

Предпосылки

Функции трансформации (2D)

translate — перемещение

.element {
  /* По X и Y */
  transform: translate(100px, 50px);

  /* Только по X */
  transform: translateX(100px);

  /* Только по Y */
  transform: translateY(-20px);

  /* Процент — от размеров САМОГО элемента */
  transform: translate(-50%, -50%);
  transform: translateX(100%); /* Сдвинуть на свою ширину */
}

rotate — вращение

.element {
  transform: rotate(45deg);     /* По часовой */
  transform: rotate(-90deg);    /* Против часовой */
  transform: rotate(0.5turn);   /* Пол-оборота = 180deg */
  transform: rotate(1turn);     /* Полный оборот */
}

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

.element {
  transform: scale(1.5);          /* Увеличить в 1.5 раза по X и Y */
  transform: scale(2, 0.5);       /* X: ×2, Y: ×0.5 */
  transform: scaleX(1.5);         /* Только по X */
  transform: scaleY(0.8);         /* Только по Y */
  transform: scale(0);            /* Невидимый (размер 0) */
  transform: scale(-1);           /* Зеркальное отражение */
  transform: scaleX(-1);          /* Горизонтальное отражение */
}

skew — наклон

.element {
  transform: skew(15deg, 5deg);   /* Наклон по X и Y */
  transform: skewX(15deg);        /* Только по X */
  transform: skewY(-10deg);       /* Только по Y */
}

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

.element {
  /* Несколько функций через пробел — порядок ВАЖЕН */
  transform: translateX(100px) rotate(45deg) scale(1.2);
}

Порядок имеет значение! Трансформации применяются справа налево. translate + rotate и rotate + translate дают разные результаты.

/* Разный порядок — разный результат */
.a { transform: translateX(200px) rotate(45deg); }
/* Сначала повернёт, потом сдвинет (по повёрнутым осям) */

.b { transform: rotate(45deg) translateX(200px); }
/* Сначала сдвинет по X, потом повернёт вокруг начала координат */

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

.element {
  /* По умолчанию — центр элемента */
  transform-origin: center center;    /* 50% 50% */

  /* Ключевые слова */
  transform-origin: top left;
  transform-origin: bottom right;

  /* Проценты и пиксели */
  transform-origin: 0 0;             /* Верхний левый угол */
  transform-origin: 100% 100%;       /* Нижний правый */
  transform-origin: 50px 30px;

  /* Влияет на rotate и scale */
  transform-origin: top left;
  transform: rotate(45deg);  /* Вращение вокруг верхнего левого */
}

/* Вращение стрелки аккордеона вокруг центра */
.arrow {
  transform-origin: center;
  transition: transform 0.3s;
}
.open() .arrow {
  transform: rotate(180deg);
}

3D-трансформации

perspective — перспектива

/* На родителе — общая перспектива для всех детей */
.container {
  perspective: 800px;
  /* Чем меньше значение, тем «ближе камера» → сильнее эффект */
}

/* На элементе — только для него */
.element {
  transform: perspective(800px) rotateY(45deg);
}

3D-функции

.element {
  /* Перемещение по Z-оси */
  transform: translateZ(100px);
  transform: translate3d(10px, 20px, 50px);

  /* Вращение по осям */
  transform: rotateX(45deg);        /* Вращение вокруг X (вверх/вниз) */
  transform: rotateY(45deg);        /* Вращение вокруг Y (влево/вправо) */
  transform: rotateZ(45deg);        /* = rotate(45deg) */
  transform: rotate3d(1, 1, 0, 45deg);

  /* Масштаб по Z */
  transform: scaleZ(2);
  transform: scale3d(1, 1, 2);
}

transform-style и backface-visibility

/* Сохранить 3D-контекст для дочерних элементов */
.container {
  transform-style: preserve-3d;
}

/* Скрыть обратную сторону (для карточек-перевёрток) */
.card-face {
  backface-visibility: hidden;
}

Individual transforms (CSS 2022+)

Современные браузеры поддерживают отдельные свойства — удобнее для анимации каждого преобразования независимо:

.element {
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
}

.element:hover {
  translate: 0 -4px;
  scale: 1.05;
}

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

Центрирование через translate

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hover-эффект «приподнятие»

.card {
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Нажатие кнопки

.btn:active {
  transform: scale(0.97) translateY(1px);
}

Flip-карточка (3D)

.flip-card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 600ms ease;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.flip-card-front {
  background: #007bff;
  color: white;
}

.flip-card-back {
  background: #28a745;
  color: white;
  transform: rotateY(180deg);
}

Горизонтальное зеркало

.mirrored {
  transform: scaleX(-1);
}

Появление снизу

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

Spinner

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 0.8s linear infinite;
}

matrix — матрица трансформации

.element {
  /* matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) */
  transform: matrix(1, 0, 0, 1, 100, 50);
  /* = translate(100px, 50px) */

  /* 3D-версия */
  transform: matrix3d(/* 16 значений */);
}

matrix используется редко вручную, но полезно знать — именно в матрицу браузер конвертирует все трансформации. JavaScript getComputedStyle возвращает matrix(...).

Частые ошибки

  1. Забыли transform-style: preserve-3d — дети «сплющиваются»:
    /* Для 3D-эффектов у детей — обязательно */
.parent { transform-style: preserve-3d; }
  2. Порядок функций — translate + rotate ≠ rotate + translate
  3. Переопределение transform — новый transform заменяет предыдущий:
    /* ОШИБКА — второй transform перезаписывает первый */
.element {
  transform: translateX(100px);
  transform: rotate(45deg); /* translateX потерян! */
}
/* ПРАВИЛЬНО */
.element {
  transform: translateX(100px) rotate(45deg);
}
  4. Inline-элементы не трансформируются — нужен display: inline-block или block
  5. transform создаёт stacking context — position: fixed внутри элемента с transform перестаёт работать относительно viewport
  6. Анимация top/left вместо transform — вызывает reflow; используйте translate для анимаций
  7. Конфликт с will-change — will-change: transform создаёт новый stacking context; z-index дочерних элементов может работать неожиданно
  8. Комбинирование через пробел, не запятую — transform: translateX(10px) rotate(45deg) — правильно; через запятую — ошибка

Практика

  • Создать hover-эффект с translateY + scale
  • Центрировать элемент через translate(-50%, -50%)
  • Сделать flip-карточку с rotateY + perspective
  • Попробовать transform-origin с rotate (углы vs центр)
  • Создать зеркальное отражение через scaleX(-1)
  • Сделать spinner через rotate + animation

Связанные темы

Ресурсы