Во время ночлега в неуютной пещере Пендальф решает скоротать время и поучиться CSS-магии ещё немного.

Ещё одна возможность CSS-трансформаций — наклон объекта по осям X и Y под заданным углом. Наклоны создаются с помощью функций skewX и skewY.

Угол наклона задаётся в градусах — deg. Например:

transform: skewX(45deg)
transform: skewY(30deg)

Для оси X положительное значение угла наклоняет объект влево, а отрицательное — вправо. Для оси Y — вниз и вверх соответственно.

В примере ниже первый блок наклонён на 25° влево, а второй — на 25° вниз:

transform: skewX(25deg);transform: skewY(25deg);

Заметим, что наряду со skewX и skewY существует обобщающая функция skew, которая принимает два аргумента: skew(наклон-по-Х [, наклон-по-Y]). Значение наклона по оси Y является необязательным аргументом и по умолчанию равно 0. Но при этом поведение функции skew при трансформации отличается от одновременного применения skewX и skewY. Исторически так сложилось, что реализация skew в браузерах поддерживается сейчас только для совместимости прежнего контента, и даже исключалась из рабочего черновика спецификации CSS. В общем, вместо skew лучше пользоваться skewX и skewY.

И что бы вы думали? Как только Пендальф выучился новому заклинанию, к нему в гости пожаловал пещерный монстр, немного смахивающий на дракона. Что-то подсказало Пендальфу, что фаерболами убедить гостя уйти восвояси не выйдет...