CSS-трансформация элемента с заданными параметрами

Точная CSS-трансформация элемента с заданными параметрами выполняется через специализированный генератор, который автоматически формирует готовый код для преобразования объектов в HTML-разметке. Инструмент избавляет от ручного подбора синтаксиса при визуальном редактировании веб-страниц. Пользователь задает числовые значения, а система объединяет их в корректное правило таблицы стилей. На выходе формируется рабочая строка свойства transform для прямого копирования в проект.

Все вычисления происходят в двухмерном координатном пространстве, где изменяются геометрия и исходное положение выбранного блока.

Генератор поддерживает четыре базовые геометрические операции, которые применяются по отдельности или комбинируются в единую цепочку:

• перемещение (translate) - линейный сдвиг объекта по горизонтальной и вертикальной осям на указанное расстояние;
• поворот (rotate) - вращение блока вокруг точки привязки на заданный угол;
• масштабирование (scale) - пропорциональное или независимое изменение ширины и высоты элемента через безразмерные коэффициенты;
• наклон (skew) - угловая деформация прямоугольной формы объекта вдоль выбранных осей координат.

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

Параметры функций перемещения, поворота, масштабирования и наклона

Каждая операция двухмерного преобразования в CSS описывается типом данных <transform-function> . Синтаксис этих функций строго регламентирует количество принимаемых аргументов, их тип и допустимые единицы измерения. При передаче некорректной единицы измерения (например, пикселей вместо градусов в функцию вращения) браузер признает все правило невалидным и игнорирует трансформацию.

Перемещение: функции translate, translateX и translateY

Операция сдвига изменяет координаты объекта вдоль горизонтальной (X) и вертикальной (Y) осей. Для записи смещения предусмотрены три синтаксические формы:

• translate(x, y) - принимает два аргумента через запятую, задавая сдвиг по горизонтали и вертикали одновременно; если второй параметр опущен, он автоматически приравнивается к нулю;
• translateX(x) - смещает элемент исключительно вдоль горизонтальной оси;
• translateY(y) - сдвигает блок только по вертикали.

Положительное значение параметра x сдвигает объект вправо, отрицательное - влево. Для параметра y положительное число означает смещение вниз, а отрицательное - вверх.

В качестве входных параметров допускаются любые линейные единицы измерения CSS: пиксели ( px ), относительные шрифтовые единицы ( rem , em ) и проценты ( % ). Ключевая особенность процентных значений в функциях группы translate заключается в базе расчета: проценты вычисляются относительно собственных габаритов трансформируемого элемента (его рассчитанной ширины для оси X и высоты для оси Y), а не относительно размеров родительского контейнера. Например, запись translateX(50%) для блока шириной 200 пикселей сдвинет его ровно на 100 пикселей вправо.

Поворот: функция rotate и угловые единицы

Вращение элемента в двухмерной плоскости выполняется через функцию rotate(angle) , которая принимает один обязательный параметр - угол поворота. Знак перед числом определяет направление движения: положительные значения вращают объект по часовой стрелке, отрицательные - против часовой стрелки.

Спецификация CSS поддерживает четыре единицы измерения углов, которые приводятся к единому геометрическому результату:

• градусы ( deg ) - стандартная шкала, где полный круг составляет 360deg , а прямой угол равен 90deg ;
• градианы ( grad ) - метрическая система измерения углов, в которой полный оборот делится на 400grad , а прямой угол соответствует 100grad ;
• радианы ( rad ) - математическая единица, где полный круг равен 2π радиан (приблизительно 6.2832rad ), а 180deg соответствуют 3.1416rad ;
• обороты ( turn ) - наглядная единица для анимаций и циклов, где 1turn равен полному вращению на 360 градусов, а 0.25turn поворачивает блок на 90 градусов.

Масштабирование: функции scale, scaleX и scaleY

Изменение размеров через трансформацию осуществляется функциями scale(x, y) , scaleX(x) и scaleY(y) . В отличие от перемещения или поворота, функции масштабирования принимают исключительно безразмерные числовые коэффициенты (целые или дробные числа с точкой в качестве разделителя). Указание любых единиц измерения, включая проценты, приведет к синтаксической ошибке.

Запись scale(x, y) управляет шириной и высотой независимо. Если передать в scale(x) только одно число, второй коэффициент автоматически примет то же значение, обеспечивая пропорциональное масштабирование по обеим осям. Логика работы числовых множителей строится вокруг единицы, которая соответствует исходному размеру объекта (100%):

• значения больше 1 растягивают элемент (например, scale(1.5) увеличивает габариты в полтора раза);
• значения в диапазоне от 0 до 1 сжимают блок (коэффициент 0.5 уменьшает размеры вдвое, а при 0 объект визуально исчезает, сжимаясь в точку);
• отрицательные коэффициенты выполняют операцию зеркального отражения (Reflect) вдоль соответствующей оси с одновременным масштабированием.

Передача параметра scaleX(-1) зеркально переворачивает элемент по горизонтали без изменения его исходной ширины, а scaleY(-1) отражает его по вертикали вверх ногами. Если задать scale(-2, 1) , блок отразится горизонтально и одновременно растянется по ширине в два раза.

Наклон: функции skew, skewX и skewY

Операция скоса (Shear) отвечает за угловую деформацию геометрии блока. Прямоугольный элемент превращается в параллелограмм, при этом противоположные стороны остаются параллельными друг другу. Для задания наклона используются три функции, принимающие угловые параметры ( deg , rad , grad , turn ):

• skew(x-angle, y-angle) - деформирует объект сразу по двум осям; если второй угол не указан, он считается равным нулю;
• skewX(angle) - наклоняет вертикальные грани элемента вдоль горизонтальной оси X (верхняя и нижняя стороны остаются строго горизонтальными);
• skewY(angle) - смещает горизонтальные грани вдоль вертикальной оси Y (боковые стороны остаются вертикальными).

При положительном угле в skewX(angle) верхняя грань блока сдвигается влево, а нижняя - вправо. При отрицательном значении наклон идет в обратную сторону. В функциях наклона не применяются значения, равные или кратные 90deg (или -90deg ), так как тангенс прямого угла стремится к бесконечности, что приводит к вырождению двухмерной фигуры в бесконечно длинную линию нулевой толщины и исчезновению элемента с экрана.

Сводная таблица синтаксиса и аргументов 2D-функций

В таблице систематизированы допустимые форматы записи, рабочие единицы измерения и базовые значения (при которых геометрия элемента остается неизменной) для всех четырех категорий преобразований:

Синтаксис свойства transform и правила комбинирования трансформаций

Для одновременного применения нескольких геометрических изменений к одному объекту все функции объединяются в единое CSS-объявление. В спецификации CSS такое объединение называется списком трансформаций ( transform-list ), где вызовы translate , rotate , scale и skew записываются последовательно через пробел внутри одного свойства transform . Разделение функций запятыми на верхнем уровне свойства является синтаксической ошибкой: запятые допустимы исключительно внутри круглых скобок для разделения аргументов конкретной функции.

/* Корректный синтаксис списка функций (transform-list) */
transform: translate(50px, -20px) rotate(45deg) scale(1.2) skewX(10deg);

/* Сброс всех примененных трансформаций */
transform: none;

При дублировании самого свойства transform внутри одного CSS-правила срабатывает стандартный механизм каскадности. Нижняя строка полностью перезаписывает верхнюю, а не дополняет ее. Чтобы элемент сохранил предыдущие изменения и получил новые, в новом состоянии необходимо перечислить весь набор требуемых функций заново. Для полного отключения любых геометрических искажений и возврата объекта к исходному состоянию используется ключевое слово none .

Порядок следования функций и некоммутативность операций

Комбинирование функций подчиняется правилам линейной алгебры, поскольку каждая операция представляет собой аффинное преобразование на плоскости. На математическом уровне браузер переводит каждую функцию в матрицу и последовательно перемножает их. Умножение матриц некоммутативно: от перестановки множителей итоговый результат меняется. На практике это означает, что изменение порядка записи одних и тех же функций в свойстве transform приводит к разному визуальному положению элемента.

Причина такого поведения заключается в том, что каждая трансформация воздействует не только на сам объект, но и на его локальную систему координат. Каждая следующая функция в списке выполняется в системе координат, которая уже была смещена, повернута, масштабирована или перекошена предыдущими операциями. Наиболее наглядно эта разница проявляется при сочетании сдвига и вращения:

• Комбинация transform: translateX(100px) rotate(45deg) сначала сдвигает элемент на 100 пикселей вправо вдоль исходной горизонтальной оси, а затем поворачивает его на 45 градусов на новом месте.
• Обратная запись transform: rotate(45deg) translateX(100px) сначала поворачивает элемент и жестко связанные с ним координатные оси на 45 градусов. Последующее смещение translateX(100px) происходит уже вдоль повернутой оси X, в результате чего блок уходит по диагонали вниз и вправо.

Аналогичный эффект возникает при смешивании других операций. Если разместить scale(2) перед translateX(50px) , масштаб координатной сетки удвоится, и фактический сдвиг составит эквивалент 100 пикселей исходного пространства. Если же применить rotate() после неравномерного масштабирования или функции skew() , вращение будет происходить в деформированном пространстве, что исказит пропорции углов объекта.

Матричное представление matrix(a, b, c, d, e, f)

Любая комбинация перемещения, поворота, масштабирования и наклона на низком уровне сводится к одной двумерной матрице преобразований размером 3×3. В синтаксисе CSS она выражается через обобщенную функцию matrix(a, b, c, d, e, f) , принимающую шесть безразмерных числовых аргументов (третья строка матрицы всегда имеет фиксированные значения 0, 0, 1 и в коде опускается).

Новые координаты каждой точки элемента (x', y') вычисляются на основе исходных координат (x, y) по линейным уравнениям: x' = a·x + c·y + e и y' = b·x + d·y + f . Роль каждого из шести коэффициентов и их связь с базовыми функциями приведены в таблице:

Единичная матрица, которая оставляет геометрию элемента без изменений, записывается как matrix(1, 0, 0, 1, 0, 0) . В ручной верстке запись через matrix() практически не используется из-за сложности чтения объединенных тригонометрических коэффициентов, поэтому разработчики опираются на наглядную цепочку отдельных функций. Однако при чтении вычисленных стилей через инструменты разработчика или метод window.getComputedStyle() браузер всегда возвращает результат именно в формате matrix(a, b, c, d, e, f) .

Система координат и точка привязки transform-origin

Все матричные вычисления и отдельные функции 2D-преобразований выполняются в декартовой системе координат веб-страницы. В отличие от классической школьной геометрии, где вертикальная ось направлена вверх, двухмерное координатное пространство в CSS имеет перевернутую вертикальную ориентацию. Горизонтальная ось X направлена слева направо: положительные значения сдвигают элемент вправо, а отрицательные - влево. Вертикальная ось Y направлена сверху вниз: положительные числа смещают объект к нижней границе экрана, а отрицательные поднимают его к верхней.

Положение самой системы координат относительно HTML-элемента определяется точкой трансформации (началом координат, где X = 0 и Y = 0). За расположение этого опорного центра отвечает свойство transform-origin . По умолчанию в браузерах установлено значение 50% 50% (или ключевое слово center ), что помещает точку отсчета строго на пересечении диагоналей элемента.

Синтаксис и единицы измерения transform-origin

Для двухмерных трансформаций свойство transform-origin принимает одно или два значения. Если передан только один параметр, браузер применяет его к горизонтальной оси X, а для вертикальной оси Y автоматически подставляет center ( 50% ). При указании двух параметров первое значение задает смещение по горизонтали, а второе - по вертикали, отсчитывая дистанцию от левого верхнего угла элемента.

Задать координаты опорной точки можно тремя способами:

• Ключевые слова позиции: по горизонтали используются left (эквивалентно 0% ), center ( 50% ) и right ( 100% ); по вертикали - top ( 0% ), center ( 50% ) и bottom ( 100% ). При использовании только ключевых слов порядок их следования не имеет значения: запись top left идентична left top .
• Проценты ( % ): вычисляются относительно общей ширины и высоты самого трансформируемого объекта. Например, при transform-origin: 25% 75% у блока размером 200×100 пикселей точка привязки окажется на расстоянии 50 пикселей от левого края и 75 пикселей от верхнего.
• Абсолютные и относительные единицы длины ( px , rem , em ): задают точное фиксированное смещение от левой верхней вершины элемента. Допускаются как положительные, так и отрицательные значения - во втором случае центр координат выносится за пределы границ самого блока.

Влияние точки привязки на операции трансформации

Изменение положения начала координат кардинально меняет визуальный результат для поворота, масштабирования и наклона, так как все геометрические деформации выполняются вокруг выбранной точки, сама же точка привязки остается неподвижной. Единственное исключение - функция линейного переноса translate() : прямое смещение по осям сдвигает все точки элемента на одинаковое расстояние независимо от того, где находится transform-origin .

В таблице ниже показано, как смещение точки привязки меняет поведение элемента при одинаковых входных параметрах трансформации.

Математически работа transform-origin с координатами $(x_0, y_0)$ эквивалентна последовательному выполнению трех операций: сначала система координат сдвигается на вектор $(x_0, y_0)$, затем применяются заданные функции трансформации, после чего система координат возвращается обратно на вектор $(-x_0, -y_0)$.

Определение опорной области через свойство transform-box

Когда в transform-origin используются проценты или ключевые слова позиций, браузеру необходимо знать, от каких именно границ элемента вести отсчет ширины (100%) и высоты (100%). За выбор этой базовой геометрической рамки отвечает вспомогательное свойство transform-box .

В зависимости от типа разметки (стандартные HTML-блоки или векторная графика SVG) применяются следующие ключевые значения transform-box :

• view-box - значение по умолчанию для элементов внутри SVG, у которых отсутствует собственный атрибут viewBox . За основу берется ближайший родительский SVG-холст, из-за чего поворот SVG-фигуры через rotate() по умолчанию происходит вокруг левого верхнего угла всего векторного изображения, а не самой фигуры.
• fill-box - ограничивает опорную область непосредственно контуром самой векторной фигуры без учета обводки. Установка transform-box: fill-box в связке с transform-origin: center решает проблему смещенного центра вращения у отдельных деталей внутри SVG-иконок.
• border-box - стандартная опорная область для всех блочных HTML-элементов. Координаты и процентные соотношения рассчитываются по внешнему краю рамки ( border ), включая внутренние отступы ( padding ) и область контента.
• content-box - сужает расчетную зону до чистого размера контентной области элемента, исключая толщину рамок и внутренних отступов.
• stroke-box - включает в расчетную рамку векторного объекта толщину его контурной линии ( stroke ).

/* Пример настройки вращения отдельного элемента внутри SVG вокруг его собственного центра */
.svg-gear-part {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

Сочетание сгенерированного списка функций в свойстве transform с точной настройкой transform-origin и transform-box позволяет управлять геометрией деформации без необходимости вручную пересчитывать компенсирующие сдвиги через translate() .

Влияние CSS-трансформаций на поток документа и рендеринг

Применение свойства transform изменяет геометрию, положение и ориентацию элемента исключительно на уровне визуального представления в браузере, не затрагивая основной поток документа (document flow). В визуальной модели форматирования CSS трансформированный объект оставляет за собой исходное физическое место в разметке. Браузер сначала рассчитывает стандартную геометрию всех узлов страницы, резервируя под элемент его базовые габариты и отступы, и только после этого применяет к его графическому слою заданную матрицу преобразований.

Поскольку зарезервированная область в макете остается неизменной, визуально сдвинутый, увеличенный или повернутый объект не расталкивает и не смещает соседние элементы. Если увеличить карточку товара через scale(1.5) или сдвинуть блок текста через translateY(100px) , трансформируемый узел просто перекроет соседний контент или уйдет под него, а окружающая верстка сохранит статичное положение. Единственное исключение в поведении страницы связано с областью прокрутки: если трансформированный элемент выходит за правую или нижнюю границу окна просмотра (или контейнера со свойством overflow: auto / scroll ), браузер расширяет прокручиваемую область и отображает полосы прокрутки.

Ограничения блочной модели для строчных элементов

Согласно спецификации CSS Transforms, геометрические преобразования работают только с трансформируемыми элементами (transformable elements), к которым относятся объекты блочной модели. На чистые строчные элементы (inline boxes), у которых свойство отображения по умолчанию равно display: inline и чей размер жестко зависит от текстовой строки и межстрочного интервала, свойство transform не действует.

При попытке применить сгенерированный код к тегам <span> , <a> , <em> или <code> без изменения их типа отображения браузер полностью проигнорирует правило. Это происходит потому, что строчный бокс может разрываться и переноситься на новую строку, из-за чего у него отсутствует единая прямоугольная рамка (bounding box), необходимая для вычисления координатной сетки и точки привязки. Чтобы трансформация сработала на текстовом фрагменте или ссылке, элементу необходимо явно задать блочный или строчно-блочный тип форматирования:

• display: inline-block - оптимальный вариант для ссылок и текстовых оберток inside строки; элемент остается в текстовом потоке, но получает собственную прямоугольную геометрию и начинает воспринимать translate , rotate , scale и skew .
• display: block - превращает узел в полноценный независимый блок, занимающий всю доступную ширину родителя.
• display: flex или display: inline-flex - делает сам контейнер или его дочерние элементы (flex-items) восприимчивыми к любым матричным деформациям.
• display: grid или display: inline-grid - аналогично флексбоксам, автоматически снимает ограничение со своих прямых потомков (grid-items), даже если изначально они были строчными тегами.

/* Трансформация не сработает на стандартной ссылке */
.broken-link-transform {
  display: inline;
  transform: rotate(-5deg) scale(1.1); /* Будет проигнорировано браузером */
}

/* Рабочий вариант за счет смены типа бокса */
.working-link-transform {
  display: inline-block;
  transform: rotate(-5deg) scale(1.1);
}

Контекст наложения и влияние на позиционирование потомков

Любое значение свойства transform , отличное от none , меняет иерархические правила взаимодействия элемента с остальной страницей. Это приводит к двум важным архитектурным изменениям в верстке, которые необходимо учитывать при интеграции кода:

Во-первых, трансформированный узел автоматически формирует новый локальный контекст наложения (stacking context). На практике это означает, что сам элемент начинает вести себя подобно блоку с position: relative и заданным z-index : он поднимается на отдельный слой отрисовки и может перекрывать соседние нетрансформированные блоки, идущие в HTML-коде выше него. Все дочерние элементы внутри такого блока оказываются заперты в его локальном контексте - их собственные значения z-index теперь конкурируют только друг с другом внутри родителя и не могут вывести дочерний узел поверх внешних элементов страницы, если сам трансформированный родитель находится ниже по слоям.

Во-вторых, элемент со свойством transform становится содержащим блоком (containing block) для всех своих потомков с абсолютным ( position: absolute ) и фиксированным ( position: fixed ) позиционированием. Если для absolute это поведение привычно, то для fixed оно часто становится причиной ошибок в верстке: фиксированный дочерний элемент (например, модальное окно или шапка) перестает привязываться к окну браузера (viewport) и начинает отсчитывать свои координаты top , left , right и bottom от границ трансформированного предка, перемещаясь и деформируясь вместе с ним.

/* Родитель с трансформацией ломает привязку фиксированного окна к экрану */
.transformed-parent {
  transform: translateX(0); /* Даже нулевой сдвиг создает containing block */
}

.transformed-parent .fixed-modal {
  position: fixed;
  top: 0;
  left: 0;
  /* Окно привяжется к углам .transformed-parent, а не к экрану монитора */
}

Конвейер рендеринга и аппаратное ускорение

Высокая производительность CSS-трансформаций обусловлена тем, как браузерный движок обрабатывает этапы вывода изображения на экран (pixel pipeline). Стандартный процесс рендеринга страницы состоит из последовательности шагов: расчет стилей (Style), вычисление геометрии и позиций в макете (Layout / Reflow), отрисовка пикселей в память - заливка фонов, текста, рамок и теней (Paint / Repaint), и финальная сборка слоев в итоговый кадр (Composite).

В следующей таблице показано, какие этапы рендеринга затрагиваются при изменении классических геометрических свойств по сравнению с использованием свойства transform :

Поскольку трансформации не влияют на поток документа и не меняют физические размеры соседей, браузер полностью пропускает ресурсоемкий этап перерасчета макета (Layout Reflow) и этап повторной растеризации векторной графики и шрифтов (Repaint). Трансформируемый элемент выделяется в самостоятельную текстуру (композитный слой) и передается напрямую в видеопамять. Все матричные операции - сдвиг через translate , вращение через rotate , масштабирование scale и наклон skew - выполняются на финальном этапе композиции слоев (GPU-accelerated compositing) силами графического процессора.

Работа на уровне готовых текстур освобождает основной поток процессора от блокирующих вычислений. Единственный нюанс растровой композиции возникает при сильном увеличении объекта через scale() : так как браузер растягивает уже готовую текстуру на этапе сборки кадра без вызова Repaint, векторный текст или иконки внутри блока могут временно терять четкость до момента, пока движок принудительно не обновит растровую маску слоя под новый масштаб.

Практическое применение сгенерированного кода в вёрстке и анимации

Сгенерированный код свойства transform с настроенными параметрами перемещения, поворота, масштабирования и наклона применяется как для статического выравнивания элементов разметки, так и для создания динамических откликов интерфейса. За счёт того, что вычисления происходят без перестроения соседних узлов документа, эти правила безопасны для использования в сложных сетках и нагруженных пользовательских компонентах.

Центрирование элементов с неизвестными размерами

Свойство сдвига в процентах решает задачу идеального позиционирования модальных окон, всплывающих подсказок, индикаторов загрузки и оверлеев, ширина и высота которых зависят от динамического контента. При абсолютном позиционировании правила top: 50% и left: 50% совмещают с центром родительского контейнера не центр самого блока, а его левый верхний угол.

Чтобы сместить элемент назад ровно на половину его собственной ширины и высоты, к нему применяется сгенерированное правило translate(-50%, -50%) :

.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Поскольку процентные значения внутри функции translate() вычисляются относительно габаритов самого трансформируемого объекта, а свойства top и left берут за основу размеры родителя, блок остаётся строго по центру при любом объёме текста или изменении разрешения экрана.

Интерактивные состояния интерфейса и микроанимации

Применение сгенерированного свойства transform к псевдоклассам состояния (например, :hover , :focus или :active ) в связке с правилом переходов transition позволяет создавать плавный визуальный отклик на действия пользователя. Для настройки перехода задаются параметры transition-property: transform , время выполнения transition-duration и кривая ускорения transition-timing-function .

В интерфейсной разработке используются следующие паттерны интерактивных состояний:

• Плавное увеличение карточек товаров, превью изображений или баннеров при наведении курсора через scale(1.03) или scale(1.05) , что визуально выделяет активный объект над сеткой без сдвига соседних колонок.
• Эффект приподнимания или нажатия кнопок за счёт вертикального смещения через translateY(-3px) при наведении и translateY(1px) в момент клика, а также горизонтальный сдвиг направляющих стрелок внутри ссылок с помощью translateX(5px) .
• Вращение иконок настроек, кнопок закрытия или индикаторов выпадающих списков (шевронов) через rotate(90deg) или rotate(180deg) при открытии меню.

.interactive-card {
  transition-property: transform;
  transition-duration: 0.25s;
  transition-timing-function: ease-out;
}

.interactive-card:hover {
  transform: translateY(-4px) scale(1.02);
}

Для циклических или многошаговых сценариев, которые не требуют удерживания курсора, полученная строка трансформации переносится внутрь директивы ключевых кадров @keyframes . Такой подход используется для бесконечного вращения индикаторов загрузки от rotate(0deg) до rotate(360deg) или пульсации уведомлений через чередование масштаба scale(1) и scale(1.1) .

Оформление нестандартных геометрических блоков и скошенных плашек

Функции наклона skewX() и skewY() позволяют уйти от стандартной прямоугольной геометрии блочной модели без использования векторных масок или фоновых изображений. Деформация по горизонтальной оси применяется для вёрстки акционных шильдиков, спортивных таблиц, кнопок в стиле киберпанк и декоративных ленточных заголовков, а наклон по вертикали - для создания диагональных разделителей между полноэкранными секциями лендингов.

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

• Компенсация наклона: текст оборачивается во внутренний блочный или строчно-блочный контейнер (например, span с display: inline-block ), которому задаётся функция наклона с точно таким же числовым значением угла, но с противоположным знаком.
• Изоляция фона: основному элементу задаётся относительное позиционирование, а сгенерированное правило transform: skewX() применяется только к его псевдоэлементу ::before с абсолютным позиционированием и отрицательным индексом наложения, который выступает в роли декоративной подложки.

.diagonal-badge {
  display: inline-block;
  background-color: #222;
  padding: 10px 24px;
  transform: skewX(-20deg);
}

.diagonal-badge-text {
  display: inline-block;
  color: #fff;
  transform: skewX(20deg);
}

Сводная таблица прикладных паттернов трансформации

Ниже представлены типовые комбинации CSS-свойств для решения частых задач вёрстки с использованием сгенерированных параметров преобразования.