transform. МДН

Свойство transform трансформирует элемент: поворачивает, масштабирует, наклоняет.

transform. МДН

Трансформации исключительно визуальные: поворот или масштабирование не подвинут соседние элементы. В раскладке страницы размеры и положение трансформируемого элемента остаются неизменным — здесь для наглядности их показывают рамочки.

Повороты в градусах:

Оригинал
transform: rotate(10deg)
transform: rotate(‑10deg)
transform: rotate(180deg)

Масштабирование, в том числе по отдельным осям:

Оригинал
transform: scale(.8)
transform: scaleX(.5)
transform: scaleY(1.05)

Свойство transform-origin задаёт точку, относительно которой применяется трансформация:

transform: scale(.5);
transform‑origin: center;
transform: scale(.5);
transform‑origin: left bottom;
transform: scale(.5);
transform‑origin: top right;

Наклоны:

Оригинал
transform: skewX(10deg)
transform: skewY(10deg)
transform: skew(5deg, 7deg)

Трансформы комбинируются:

transform: scale(.5) rotate(45deg);
transform: scaleX(.5) rotate(‑3deg) skewX(12deg);
transform: scaleX(1.2) skew(320deg); transform‑origin: left bottom;

translate. МДН

Есть трансформ для смещения, но сейчас его заменило отдельное свойство translate:

translate. МДН

transform:
translate(‑5%, ‑7%);

translate: 5% ‑7%;
transform:
translate(30px, 5px);

translate: 30px 5px;

Ещё есть хитрые ‑трансформы, но о них в другой раз.

Трансформами верстаются интересные украшательства и спецэффекты. Главное всегда помнить, что трансформации только визуальные — для браузера и других элементов трансформируемый элемент остаётся прямоугольником в исходном положении. Учитывайте это в остальном коде.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы