skew()

skew() — это функция для CSS-трансформаций (transform), которая искажает элемент вдоль осей x и y, создавая эффект перекоса.

Искажаем элемент на 30 градусов вдоль оси x:

        
          
          div {  transform: skew(30deg);}
          div {
  transform: skew(30deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Угол искажения должен указываться в единицах измерения углов. В случае, если в скобках указано одно значение, это величина искажения по оси x. Для искажения по оси y нужно дописать второе значение. Если мы хотим исказить элемент только по оси y, значение для x будет 0.

x — угол искажения по горизонтали (ось x) в градусах (deg).

y — (опционально) угол искажения по вертикали (ось y).

        
          
          /* Искажение по X на 20 градусов */.skew-x {  transform: skew(20deg);}/* Искажение по Y на 10 градусов */.skew-y {  transform: skew(0, 10deg);}
          /* Искажение по X на 20 градусов */
.skew-x {
  transform: skew(20deg);
}

/* Искажение по Y на 10 градусов */
.skew-y {
  transform: skew(0, 10deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно исказить элемент сразу по обеим осям:

        
          
          /* Искажение по X на 20° и по Y на 10° */.skew-both {  transform: skew(20deg, 10deg);}
          /* Искажение по X на 20° и по Y на 10° */
.skew-both {
  transform: skew(20deg, 10deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Существует написание функции skew() в виде отдельных значений — skewX(), skewY(). Сейчас такая форма записи считается устаревшей, сохраняется ради обратной совместимости и не рекомендуется к использованию в новых проектах.

Эти функции обозначают величину искажения элемента по конкретной оси:

        
          
          /* Искажение по X на 20° */.skew {  transform: skewX(20deg);}/* Эквивалентно современной записи */.skew-both {  transform: skew(20deg);}
          /* Искажение по X на 20° */
.skew {
  transform: skewX(20deg);
}

/* Эквивалентно современной записи */
.skew-both {
  transform: skew(20deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          /* Искажение по Y на 20° */.skew {  transform: skewY(20deg);}/* Эквивалентно современной записи */.skew-both {  transform: skew(0, 20deg);}
          /* Искажение по Y на 20° */
.skew {
  transform: skewY(20deg);
}

/* Эквивалентно современной записи */
.skew-both {
  transform: skew(0, 20deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно исказить элемент сразу по обеим осям:

        
          
          /* Искажение по X на 20° и по Y на 40° */.skew-both {  transform: skew(20deg, 40deg);}/* Эквивалентная запись, которая считается устаревшей */.skew-both {  transform: skewX(20deg) skewY(40deg);}
          /* Искажение по X на 20° и по Y на 40° */
.skew-both {
  transform: skew(20deg, 40deg);
}

/* Эквивалентная запись, которая считается устаревшей */
.skew-both {
  transform: skewX(20deg) skewY(40deg);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

skew() искажает стороны элемента, сохраняя параллельность линий. В отличие от scale(), размеры элемента остаются прежними. По умолчанию точка трансформации элемента — его центр. Можно комбинировать skew() с другими трансформациями (rotate, translate()).

💡 Нужно учитывать, что искажение влияет на весь элемент вместе с его содержимым. Например, текстом. Можно задать обратное искажение содержимому, если хочется сохранить его внешний вид.

Для генерации искажения можно использовать такие генераторы skew(), как Webcode, CSS-Generator и другие.