Что такое transform?

Что такое transform?

Transform в CSS — это свойство, которое позволяет изменять визуальное представление элемента БЕЗ изменения его положения в потоке документа (без влияния на разметку и соседние элементы). Transform используется для скейлирования, поворота, смещения и наклона элементов с помощью 2D или 3D преобразований.

Основные функции transform

1. translate() — смещение

/* Сдвиг на 50px вправо и 20px вниз */
.box {
  transform: translate(50px, 20px);
}

/* Или отдельно */
.box {
  transform: translateX(50px);  /* Только по X */
  transform: translateY(20px);  /* Только по Y */
}

/* В 3D */
.box {
  transform: translate3d(50px, 20px, 10px);  /* X, Y, Z */
}

2. scale() — масштабирование

/* Увеличение в 1.5 раза */
.box {
  transform: scale(1.5);
}

/* Разные масштабы по осям */
.box {
  transform: scale(1.5, 0.8);  /* X: 1.5x, Y: 0.8x */
}

/* Отдельно */
.box {
  transform: scaleX(2);  /* В два раза шире */
  transform: scaleY(0.5);  /* В два раза ниже */
}

3. rotate() — поворот

/* Поворот на 45 градусов */
.box {
  transform: rotate(45deg);
}

/* В 3D — вокруг осей */
.box {
  transform: rotateX(45deg);  /* Поворот вокруг оси X */
  transform: rotateY(45deg);  /* Поворот вокруг оси Y */
  transform: rotateZ(45deg);  /* Поворот вокруг оси Z (как обычный rotate) */
}

/* Можно комбинировать */
.box {
  transform: rotate3d(1, 1, 1, 45deg);  /* Поворот по 3D вектору */
}

4. skew() — наклон

/* Наклон по обеим осям */
.box {
  transform: skew(20deg, 10deg);  /* X: 20deg, Y: 10deg */
}

/* Отдельно */
.box {
  transform: skewX(20deg);  /* Наклон по X */
  transform: skewY(10deg);  /* Наклон по Y */
}

5. matrix() — матричное преобразование

/* Полное преобразование через матрицу */
.box {
  transform: matrix(a, b, c, d, e, f);
}

/* Это редко используется, т.к. сложно вычислять вручную */

Комбинирование преобразований

/* Несколько трансформаций одновременно */
.box {
  transform: translate(50px, 20px) scale(1.5) rotate(45deg);
}

/* Порядок имеет значение! */
.box1 {
  transform: translate(50px) rotate(45deg);
  /* Сначала сдвиг, потом поворот */
}

.box2 {
  transform: rotate(45deg) translate(50px);
  /* Сначала поворот, потом сдвиг (результат будет другой!) */
}

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

По умолчанию преобразования происходят относительно центра элемента (50%, 50%):

.box {
  transform: rotate(45deg);
  transform-origin: center;  /* По умолчанию */
}

/* Можно изменить точку вращения */
.box {
  transform: rotate(45deg);
  transform-origin: top left;  /* Вращать от верхнего левого угла */
}

/* Или с координатами */
.box {
  transform: rotate(45deg);
  transform-origin: 0 0;  /* От верхнего левого угла */
  /* или */
  transform-origin: 20% 30%;
}

Почему transform лучше, чем изменение position или size?

❌ Плохо — изменение top/left:

.box {
  position: relative;
  top: 50px;
  left: 50px;
  /* Это вызывает перерасчет layout (reflow) */
  /* Медленно! */
}

✅ Хорошо — использование transform:

.box {
  transform: translate(50px, 50px);
  /* Это происходит на слое композиции (composite layer) */
  /* Быстро! Не вызывает reflow */
}

Transform работает с GPU, не требует перерасчета layout. Это намного быстрее!

Пример: анимация кнопки при наведении

.button {
  transform: scale(1);  /* Нормальный размер */
  transition: transform 0.3s ease;  /* Плавная анимация */
}

.button:hover {
  transform: scale(1.1) translateY(-2px);  /* Увеличение и поднятие */
}

<button class="button">Нажми меня</button>

Пример: 3D флип карточки

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px;  /* Перспектива для 3D */
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;  /* Сохранить 3D пространство для детей */
  transition: transform 0.6s;
}

.card:hover .card-inner {
  transform: rotateY(180deg);  /* Повернуть на 180 градусов по Y */
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;  /* Скрыть обратную сторону */
}

.card-back {
  transform: rotateY(180deg);  /* Начально скрыта */
}

<div class="card">
  <div class="card-inner">
    <div class="card-front">Фронт</div>
    <div class="card-back">Бэк</div>
  </div>
</div>

transform vs transition vs animation

transform — свойство для изменения формы/размера/положения

transition — плавная смена значений transform

.box {
  transform: scale(1);
  transition: transform 0.3s ease;  /* Плавно изменяет transform */
}

.box:hover {
  transform: scale(1.2);  /* Плавное увеличение */
}

animation — более сложные, многошаговые анимации

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  animation: spin 2s linear infinite;  /* Крутится бесконечно */
}

Производительность

✅ Используй для анимаций:

• transform
• opacity

❌ Не используй для анимаций:

• width, height
• top, left, bottom, right
• margin, padding
• Другие свойства, вызывающие reflow

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

Для работы с 3D нужна перспектива:

.container {
  perspective: 1000px;  /* Расстояние в пиксели для перспективы */
}

.box {
  transform: rotateX(45deg) rotateY(45deg) translateZ(50px);
  /* translateZ требует perspective у родителя */
}

Transform — это один из самых важных инструментов для оптимизации анимаций в современном веб-дизайне!