Зарегистрируйтесь для доступа к 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, так как линии всегда прямые.

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»