transform: skewY() у CSS — нахил елемента по осі Y

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: skewY(-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: skewY(30deg);
  background-color: red;
}

HTML

<h4 class="cap">1. У який бік і на скільки</h4>
<div class="row">
    <div class="fig"><div class="b s-plus">skewY(20deg)</div><p class="lbl">права сторона вниз</p></div>
    <div class="fig"><div class="b s-minus">skewY(-20deg)</div><p class="lbl">права сторона вгору</p></div>
    <div class="fig"><div class="b s-x">skewX(20deg)</div><p class="lbl">по горизонталі — це вже skewX</p></div>
    <div class="fig"><div class="b s-origin">skewY(20deg)</div><p class="lbl">той самий кут, але transform-origin: left</p></div>
</div>

<h4 class="cap">2. Два випадки, які виглядають як поломка</h4>
<div class="row">
    <div class="fig"><div class="b s-180">skewY(180deg)</div><p class="lbl">тангенс 180° = 0, елемент не змінився</p></div>
    <div class="fig"><div class="b s-90">skewY(90deg)</div><p class="lbl">тангенс прямого кута обмежено десятьма тисячами — від елемента лишилася невидима вертикальна смуга, тому клітинка порожня</p></div>
    <div class="fig"><div class="b s-none">skewY(45)</div><p class="lbl">без одиниці кута запис невалідний — трансформації немає взагалі</p></div>
</div>

<h4 class="cap">3. Робочий прийом: перекосити тло, лишити текст рівним</h4>
<div class="banner">
    <div class="banner-in">
        <strong>Смуга нахилена, текст рівний.</strong>
        Контейнер має <code>skewY(-4deg)</code>, а цей блок усередині —
        <code>skewY(4deg)</code>. Під смугою закладено відступ
        <code>calc(50% × tan(4deg))</code>, щоб нахилений край нікуди не наїхав.
    </div>
</div>
<p class="note">Перекіс не займає місця в потоці: без відступу наступний абзац
    заліз би під нахилений край, бо в розкладці смуга й далі прямокутна.</p>

CSS

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 10px;
}

.fig {
    width: 170px;
}

.b {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin: 34px 0 44px;
    background: #dbe6f5;
    border: 2px solid #2f6fd0;
    border-radius: 4px;
    font-size: .8rem;
    color: #1d3a6b;
}

.s-plus {
    transform: skewY(20deg);
}

.s-minus {
    transform: skewY(-20deg);
}

.s-x {
    transform: skewX(20deg);
}

.s-origin {
    transform: skewY(20deg);
    transform-origin: left center;
    /* при зсунутій точці правий край падає вдвічі нижче — місця треба більше */
    margin-bottom: 76px;
}

.s-180 {
    transform: skewY(180deg);
}

.s-90 {
    transform: skewY(90deg);
}

/* ⚠️ без одиниці кута — уся властивість transform відкидається */
.s-none {
    transform: skewY(45);
}

.lbl {
    margin: 0;
    color: #5a6472;
    font-size: .8rem;
}

.banner {
    max-width: 560px;
    margin: calc(280px * tan(4deg)) 0;
    padding: 4px 0;
    background: linear-gradient(90deg, #edf9ef, #dbe6f5);
    border-top: 3px solid #29713a;
    border-bottom: 3px solid #29713a;
    transform: skewY(-4deg);
}

.banner-in {
    padding: 10px 18px;
    transform: skewY(4deg);
    font-size: .92rem;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}