Трансформации в CSS

translate, rotate, scale, skew, transform-origin, перспектива и комбинации для живых интерфейсов без потери смысла.

Уровень: средний 10 разделов 1,5 часа

1. Семейство transform

transform смещает, поворачивает, масштабирует и наклоняет элемент в плоскости (или 3D). В отличие от width/height, transform не влияет на поток соседей — идеально для hover-эффектов.

.card:hover { transform: translateY(-4px); }
.icon { transform: rotate(45deg); }
.logo { transform: scale(0.9); }

2. translate

translate(x, y) двигает элемент от его текущего места. Проценты считаются от СВОИХ размеров — поэтому translate(-50%, -50%) сверхудобно для центрирования.

.modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.badge { transform: translate(8px, -8px); }

translate не трогает поток — соседи стоят на месте;
видео из translate плавнее: браузер рисует только слой элемента.

3. rotate и scale

.close { transform: rotate(45deg); }
.thumb:hover { transform: scale(1.03); }
.lock:hover { transform: scale(1.1) rotate(-2deg); }

rotate(deg) — по часовой;
scale(0.5) — уменьшить вдвое, scale(1.2) — увеличить;
одна строка: scale (1.03) — проценты не нужны.

4. transform-origin

transform-origin — точка отсчёта трансформирования. По умолчанию центр (50% 50%). Для «открытия» шторок и поворота от края — задаётся явно.

.door { transform-origin: left center; }
.door:hover { transform: rotateY(40deg); }
.plus { transform-origin: 0 0; } /* поворот от левого верхнего угла */

5. skew — наклон

.tag { transform: skewX(-8deg); }
.tag__inner { transform: skewX(8deg); }   /* компенсация текста */

skew используют редко и осторожно: наклонённый текст читается хуже. Классика — «бумажные» ярлыки на углах фото.

6. Комбинирование функций

Функции в одной строке применяются слева направо. Порядок важен: rotate после translate повернёт смещение.

.coin { transform: translate(50%) rotate(30deg); }  /* сместить, затем повернуть */
.coin2 { transform: rotate(30deg) translate(50%); }   /* сначала повернуть — другое место */

7. transform в 3D

rotateX/rotateY/translateZ и perspective создают объём. perspective на родителе даёт честную проекцию; на элементе — точечную глубину отдельной фигуры.

.scene { perspective: 800px; }
.card { transform-style: preserve-3d; }
.card:hover { transform: rotateY(12deg); }
.flip { transform: rotateY(180deg); }

3D-трансформации — дорогие. Не вставляйте их в каждую анимацию списка; для карточек хватит лёгкого rotateY с short-размытием.

8. transform и контекст слоя

transform создаёт контекст наложения: z-index внутри и внешние слои разделяются;
transform на предке делает fixed-детей «запертыми» (см. позиционирование);
translate анимируют по GPU — гладкие 60fps-переходы.

9. Применение: микромметрия в карточках

.card {
  transition: transform 0.2s ease-out;
}
.card:hover { transform: translateY(-6px); }   /* физически «приподняли» */
.card:active { transform: translateY(-2px); }

Паттерн «hover поднял–press прижал»: два состояния одной анимации. Никакой JS — чистые transition + transform.

10. Чек-лист трансформаций

transform не ломает соседей — идеален для ховров;
порядок функций влияет на результат;
transform-origin задаёт точку, от которой всё считается;
3D включайте осознанно (перспектива, дороговизна);
анимации transform+opacity — быстрые и плавные.

Что дальше

Курс завершён.

← Вернуться к курсам