transform. МДН
Свойство transform трансформирует элемент: поворачивает, масштабирует, наклоняет.
transform. МДН
Трансформации исключительно визуальные: поворот или масштабирование не подвинут соседние элементы. В раскладке страницы размеры и положение трансформируемого элемента остаются неизменным — здесь для наглядности их показывают рамочки.
Повороты в градусах:
Масштабирование, в том числе по отдельным осям:
Свойство transform-origin задаёт точку, относительно которой применяется трансформация:
transform‑origin: center;
transform‑origin: left bottom;
transform‑origin: top right;
Наклоны:
Трансформы комбинируются:
translate. МДН
Есть трансформ для смещения, но сейчас его заменило отдельное свойство translate:
translate. МДН
translate(‑5%, ‑7%);
↓
translate: 5% ‑7%;
translate(30px, 5px);
↓
translate: 30px 5px;
Ещё есть хитрые 3Д‑трансформы, но о них в другой раз.
Трансформами верстаются интересные украшательства и спецэффекты. Главное всегда помнить, что трансформации только визуальные — для браузера и других элементов трансформируемый элемент остаётся прямоугольником в исходном положении. Учитывайте это в остальном коде.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.