skewX() в CSS — нахил по горизонталі у властивості transform

Опис

автор: Bond

Загальний опис

автор: NagarD

Порада: Використовуйте skewX() з обережністю, оскільки великі значення нахилу можуть впливати на читабельність тексту та зовнішній вигляд елементів.
автор: Bond
Порада: Експериментуйте з різними значеннями angle, щоб створити цікаві нахилові ефекти та перетворення.
автор: Bond

Синтаксис

skewX(<angle>);

Функція skewX може отримувати єдине значення:

<angle>

Кут нахилу, виражений у градусах (deg), радіанах (rad), градах (grad) або поворотних точках (turn).

автор: Bond

Значення без задання:	none

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	3.5	3.1	10.5	12	9

Підтримка: мобільні переглядачі
Переглядач
	2	18	4	3.2

Приклади

+ запропонувати свій приклад у пісочниці

При наведенні курсору на блок .box, він змінює свій нахил за допомогою transform: skewX(-30deg)

HTML

<div id="description">
  <h2>Приклад 1</h2>
  <p>Наведіть курсор на елемент, щоб побачити зміну нахилу.</p>
</div>

<div id="result">
  <div class="box"></div>
</div>

CSS

#description {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  transition: transform 0.3s ease;
}

.box:hover {
  transform: skewX(-30deg);
}

автор: Bond

Два елементи .box, проте другий має клас .skewed, який використовує transform: skewX(30deg) для зміни нахилу.

HTML

<div id="description">
  <h2>Приклад 2</h2>
  <p>Один з елементів має змінений нахил.</p>
</div>

<div id="result">
  <div class="box"></div>
  <div class="box skewed"></div>
</div>

CSS

#description {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin-right: 20px;
}

.box.skewed {
  transform: skewX(30deg);
  background-color: red;
}

автор: Bond

Перший ряд — напрямок: за додатного кута верхній край іде ліворуч, і текст виглядає зворотним курсивом, а звичний курсивний нахил дає від'ємний кут. Другий показує, як росте рамка й що висота не змінюється ніколи. Третій — розкладка: перекошена середня плитка не зрушила сусідів. Далі — скошена вкладка з вирівняним написом (головний практичний прийом) і невалідні записи без одиниці та з двома аргументами.

HTML

<p class="head">⚠️ Напрямок: за додатного кута верхній край іде ЛІВОРУЧ,
    нижній — праворуч. Курсивний нахил дає від'ємний кут:</p>
<div class="grid">
    <figure><div class="stage"><div class="b s0">0deg</div></div><figcaption>без перекосу</figcaption></figure>
    <figure><div class="stage"><div class="b s1">30deg</div></div><figcaption>skewX(30deg) — нахил «\»</figcaption></figure>
    <figure><div class="stage"><div class="b s2">-30deg</div></div><figcaption>skewX(-30deg) — нахил «/»</figcaption></figure>
</div>
<div class="grid">
    <figure><div class="txt">Ага</div><figcaption>без перекосу</figcaption></figure>
    <figure><div class="txt tx1">Ага</div><figcaption>skewX(15deg) — зворотний курсив</figcaption></figure>
    <figure><div class="txt tx2">Ага</div><figcaption>skewX(-15deg) — схоже на курсив</figcaption></figure>
    <figure><div class="txt tx3">Ага</div><figcaption>справжній font-style: italic</figcaption></figure>
</div>

<p class="head">Рамка росте вшир, а висота не змінюється ніколи. Пунктир показує,
    скільки місця займає фігура:</p>
<div class="grid">
    <figure class="w"><div class="stage wide"><div class="b g0">0deg</div></div><figcaption>100×60 — вихідна коробка</figcaption></figure>
    <figure class="w"><div class="stage wide"><div class="b g1">15deg</div></div><figcaption>→ 116.08×60</figcaption></figure>
    <figure class="w"><div class="stage wide"><div class="b g2">30deg</div></div><figcaption>→ 134.63×60</figcaption></figure>
    <figure class="w"><div class="stage wide"><div class="b g3">45deg</div></div><figcaption>→ 160×60</figcaption></figure>
    <figure class="w"><div class="stage wide"><div class="b g4">60deg</div></div><figcaption>→ 203.92×60</figcaption></figure>
</div>

<p class="head">Розкладку перекіс не змінює: сусіди середньої плитки стоять
    там, де стояли б і без нього:</p>
<div class="flow">
    <span class="cell"></span><span class="cell mid"></span><span class="cell"></span>
</div>

<p class="head">Головний практичний прийом — зворотний перекіс на написі:</p>
<div class="grid">
    <figure><div class="tab"><span>без правки</span></div><figcaption>напис теж перекошено</figcaption></figure>
    <figure><div class="tab"><span class="fix">виправлено</span></div><figcaption>skewX() з протилежним кутом на написі</figcaption></figure>
</div>

<p class="head">⚠️ Одиниця обов'язкова, і другого аргументу в skewX() немає:</p>
<div class="grid">
    <figure><div class="stage"><div class="b bad">skewX(30)</div></div><figcaption>відкинуто</figcaption></figure>
    <figure><div class="stage"><div class="b bad2">skewX(30deg, 10deg)</div></div><figcaption>відкинуто — це skew()</figcaption></figure>
    <figure><div class="stage"><div class="b good">skew(30deg, 10deg)</div></div><figcaption>а так — працює</figcaption></figure>
</div>

CSS

.head {
    margin: 20px 0 8px;
    max-width: 620px;
    color: #5a6472;
    font-size: .9em;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

figure {
    margin: 0;
    width: 170px;
}

figcaption {
    margin-top: 6px;
    color: #5a6472;
    font: 12px/1.35 ui-monospace, monospace;
}

.stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 110px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

figure.w {
    width: 230px;
}

.stage.wide {
    width: 230px;
    height: 100px;
}

.b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 60px;
    background: #2f6fd0;
    color: #fff;
    font: 700 12px/1 ui-monospace, monospace;
}

.s0 { transform: skewX(0deg); }
.s1 { transform: skewX(30deg); }
.s2 { transform: skewX(-30deg); }

.txt {
    width: 170px;
    height: 60px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
    color: #1c1c1c;
    font: 34px/60px Georgia, serif;
    text-align: center;
}

.tx1 { transform: skewX(15deg); }
.tx2 { transform: skewX(-15deg); }
.tx3 { font-style: italic; }

.g0 { transform: skewX(0deg); outline: 1px dashed #d64545; }
.g1 { transform: skewX(15deg); outline: 1px dashed #d64545; }
.g2 { transform: skewX(30deg); outline: 1px dashed #d64545; }
.g3 { transform: skewX(45deg); outline: 1px dashed #d64545; }
.g4 { transform: skewX(60deg); outline: 1px dashed #d64545; }

.flow {
    display: flex;
    gap: 0;
    width: 360px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

.cell {
    width: 120px;
    height: 70px;
    background: #b9c6d8;
    border-right: 1px solid #fff;
}

.mid {
    background: #e08a1e;
    transform: skewX(25deg);
}

.tab {
    width: 170px;
    height: 60px;
    background: #3a9a4f;
    transform: skewX(-18deg);
}

.tab span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font: 700 15px/1 ui-monospace, monospace;
}

.fix {
    transform: skewX(18deg);
}

.bad {
    background: #d64545;
    transform: skewX(30);
}

.bad2 {
    background: #d64545;
    transform: skewX(30deg, 10deg);
}

.good {
    background: #3a9a4f;
    transform: skew(30deg, 10deg);
}

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.