Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

2D трансформации. Наклон CSS: Transform (трансформация объектов)

Последнее, что можно сделать с элементом в двухмерном пространстве с использованием свойства transform — наклон. Эта трансформация достигается засчёт наклона элемента по одной из оси или по двум осям одновременно.

Не путайте rotate и skewrotate отвечает за поворот элемента, а skew за трансформацию путём наклона. Очень часто эти функции используются вместе для создания интересных анимаций.

Взглянем, как именно меняется элемент при использовании функции skew. Для демонстрации возьмём прямоугольник и наклоним его на 45 градусов влево. С точки зрения CSS это простая операция, которая выглядит так:

.box {
  transform: skewX(45deg);
}

Вначале может показаться непонятным, как именно трансформировался элемент. Разберём всё по порядку:

  • Как и с другими функциями, функция skew является общей для функций skewX и skewY. В примере была использована трансформация только по оси x.
  • 45deg. В уроке про поворот элемента были описаны все основные единицы измерения, которыми описываются операции поворота. Такие же единицы используются и для наклона элемента по осям с помощью функции skew. В примере использовано значение 45deg, что значит 45 градусов влево. При использовании отрицательных значений наклон будет осуществляться вправо.

Чтобы понять, где именно 45 градусов в примере, взглянем на следующее изображение. На нём красным цветом обозначено исходное месторасположение элемента, а синим — конечное. Можно сказать, что браузер взял обе стороны нашего прямоугольника и наклонил их на 45 градусов. На изображении отдельно отмечены получившиеся углы.

Использование функции skewX

Как и в случае с другими трансформациями, skew затрагивает не только тот блок, на котором применяется, но и все вложенные. Это видно на примере текста внутри синего блока из первого примера.

Есть возможность избежать этого небольшим, но красивым решением. Для внутреннего создаётся отдельный контейнер и указывается противоположное значение функции skew. Например, если блок наклоняется на 45 градусов по горизонтали, то контент должен наклоняться на минус 45 градусов по горизонтали. Это одна из самых частых операций при использовании skew.


Важно: при использовании такого приёма всегда внимательно следите за контентом внутри. Дело в том, что развернув его, мы исказили контент относительно родительского блока. В такой ситуации очень легко потерять часть контента из-за его выхода за пределы родительского блока.


Использование skewY принципиально отличается только осью, по которой происходит трансформация. Поворот происходит не по вертикальным линиям, как в случае со skewX, а по горизонтальным. Из-за этого сама трансформация более явная, так как для глаза меняется опорная точка. Если в случае со skewX сам элемент находился на оси x и не смещался, то при skewY эта опорная точка для глаза исчезает.

На примере выше показано, как трансформируется элемент при использовании skewY. Красный блок показывает анимацию преобразования элемента. Зелёный блок — элемент после использования skewY(45deg).

Обратите внимание на вертикальные линии. Они показывают ось y. По линиям можно увидеть, что сам элемент никак не деформируется по оси x, так как линии всегда прямые.

Дополнительное задание

Используя примеры выше попробуйте деформировать элемент одновременно по двум осям


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»