Ответ
transform в CSS позволяет изменять внешний вид элемента с помощью различных трансформаций: перемещение, масштабирование, поворот, наклон. Работает в 2D и 3D пространстве.
Основные функции:
translate(x, y)– сдвиг элементаscale(x, y)– изменение размераrotate(deg)– поворотskew(x, y)– наклон
Пример:
.box {
transform: translate(50px, 20px) rotate(45deg) scale(1.2);
}Особенности:
- Не влияет на поток документа (соседние элементы не сдвигаются)
- Можно комбинировать несколько трансформаций
- Для 3D-эффектов нужен
transform-style: preserve-3d
Ответ 18+ 🔞
Смотри, вот этот твой transform в CSS — это ж как волшебная палочка для верстальщика, только без всякой этой ебейшей магии, всё честно. Прям берёшь элемент и начинаешь его вертеть, как кусок пластилина в руках у дебила.
Основные приколюхи, которые умеет эта штука:
translate(x, y)— взял и подвинул элемент куда надо. Типа «пошёл нахуй» в сторону.scale(x, y)— растянул или сжал, как твоё терпение к пятничным митингам.rotate(deg)— повернул на любой угол. Можно хоть на 360, чтобы всех заебать.skew(x, y)— наклонил, сделал кривым, как жизнь после трёх бутылок пива.
Вот смотри, как это в коде выглядит, тут всё просто:
.box {
transform: translate(50px, 20px) rotate(45deg) scale(1.2);
}Перевожу с технического на русский: «Эй, коробка, сдвинься на 50 пикселей вправо и 20 вниз, потом довернись на 45 градусов и, чих-пых, вырасти на 20%». И всё это в одной строчке, красота!
А главная фишка в чём? В том, что ты этим НЕ ЛОМАЕШЬ ВЕСЬ ДОКУМЕНТ. Соседние элементы даже не чихнут, они остаются на своих местах, как будто ничего и не произошло. Ты просто взял один конкретный кусок интерфейса и устроил ему персональный ад, в хорошем смысле.
Хочешь в 3D? Без проблем, ёпта! Только не забудь написать transform-style: preserve-3d родителю, а то твои 3D-потроха так и останутся плоскими, как твои шутки. В общем, инструмент — огонь, главное не переборщить, а то получится сайт-аттракцион «укачай пользователя до блевотины».