Перемещения и трансформации: translate, rotate, scale, skew и матрицы

Как трансформации меняют элементы на странице 💫

CSS-трансформации — это мощный инструмент, который позволяет перемещать, вращать, масштабировать и искажать элементы, не затрагивая поток документа. Всё работает благодаря свойству transform и его функциям:

.element {
  transform: функция(значение);
}

Главное преимущество — трансформации не вызывают перерасчёт макета (reflow), что делает их идеальными для анимаций!

Переносим элементы: translate() 🏎️

translate() перемещает элемент по осям X и Y. Работает как position: relative, но без влияния на соседей.

.box {
  transform: translate(20px, 50px); /* X, Y */
}

🔹 Особенности:

• translateX() и translateY() — для перемещения по одной оси
• Проценты считаются от размеров самого элемента (не родителя!)
• Отрицательные значения двигают в обратную сторону

💡 Совет: Используйте translate() вместо top/left для анимаций — это значительно плавнее!

Вращение: rotate() 🌀

Поворачивает элемент на заданный угол (градусы deg или радианы rad):

.spinner {
  transform: rotate(45deg); /* Поворот на 45° */
}

🔹 Трюк: Точка вращения по умолчанию — центр элемента. Меняем её через transform-origin:

.door {
  transform-origin: left center;
  transform: rotate(90deg); /* Дверь открывается! */
}

Масштабирование: scale() 📏

Увеличивает или уменьшает элемент. Значение 1 — исходный размер:

.hover-effect:hover {
  transform: scale(1.2); /* Увеличение на 20% */
}

🔹 Варианты: - scaleX()/scaleY() — растяжение по одной оси - scale(2, 0.5) — удвоить ширину, уменьшить высоту вдвое

⚠️ Внимание: Масштабирование влияет на все дочерние элементы и может размыть текст!

Искажение: skew() 🔺

Наклоняет элемент по осям, создавая эффект "наклона". Принимает углы:

.italic {
  transform: skewX(-15deg); /* Наклон текста */
}

🔹 Применение:

• Создание динамичных форм
• Эффекты наведения (особенно в сочетании с transition)

Матричные трансформации 🧮

Для сложных преобразований используется matrix() — компактная запись всех трансформаций в одной функции:

.advanced {
  transform: matrix(1, 0.3, 0, 1, 50, 0);
}

📐 Параметры матрицы:
matrix(a, b, c, d, e, f) где: - a и d — масштабирование - b и c — skew - e и f — translate

🔥 Pro Tip: Генерируйте матрицы через DevTools или онлайн-калькуляторы!

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

Функции можно объединять, перечисляя через пробел:

.card:hover {
  transform: rotate(5deg) scale(1.05) translateY(-5px);
  transition: transform 0.3s ease; /* Плавность! */
}

🔹 Порядок важен! rotate() перед translate() даст иной результат, чем наоборот.

Трёхмерные трансформации 🚀

Добавляем ось Z для объёма:

.cube {
  transform: rotateX(60deg) rotateY(30deg) translateZ(100px);
  transform-style: preserve-3d; /* Включаем 3D-пространство! */
}

🔹 Ключевые свойства: - perspective — глубина сцены - backface-visibility — видимость обратной стороны

Практический пример: Кнопка с эффектом 🛠️

Создадим интерактивную кнопку:

.btn {
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

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

🌟 Эффект: При наведении кнопка "приподнимается", при нажатии — "продавливается".

Итоги и лучшие практики 🏆

✅ Что запомнить:

• Используйте transform вместо top/left для анимаций
• Комбинируйте функции для сложных эффектов
• Добавляйте transition для плавности
• Экспериментируйте с transform-origin

🚀 Дальше: Изучите анимации с @keyframes для ещё более впечатляющих результатов!