scaleY() в CSS — масштаб по вертикалі у властивості transform

Опис

scaleY() - це функція трансформації CSS, яка дозволяє змінювати масштаб елемента по вертикалі. Вона використовується разом з властивістю transform, яка може бути задана для елемента або його псевдоелемента.

Ця функція приймає один числовий аргумент - scaleY(y), де y - це коефіцієнт масштабування для вертикального напрямку. Значення менше 1 зменшує висоту елемента, а значення більше 1 збільшує його. Наприклад, scaleY(0.5) зменшить висоту елемента до половини його оригінальної висоти, а scaleY(2) подвоїть його висоту.

Приклад використання:

/* Зменшимо висоту елемента до половини його оригінальної висоти */
.example-element {
  transform: scaleY(0.5);
}

У даному прикладі елемент з класом "example-element" буде зменшений до половини його оригінальної висоти, створюючи ефект збільшення простору навколо нього.

Ця функція дозволяє створювати цікаві ефекти веб-дизайну. Наприклад, ви можете використовувати її для анімаційного збільшення або зменшення висоти елемента під час інтерактивності користувача. Вона також працює разом з іншими функціями трансформації, такими як scaleX() для масштабування по горизонталі, rotate() для повороту елемента, translate() для зсуву та іншими, що дозволяє створювати складні та креативні ефекти трансформації для елементів вашої веб-сторінки.

автор: Bond

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

автор: NagarD

Порада: Використовуйте значення менше 1, щоб зменшити висоту елемента і створити ефект стиснення.
автор: Bond
Порада: Застосовуйте значення більше 1, щоб збільшити висоту елемента і створити ефект розтягнення.
автор: Bond
Порада: Пам'ятайте, що значення 1 не змінює оригінальну висоту елемента.
автор: Bond
Нотатка: Функцію scaleY() можна застосувати до елементів будь-якого типу, включаючи блокові та таблиці.
автор: Bond

Синтаксис

scaleY(value);

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

<value>

Числове значення, яке вказує масштабування елемента по вертикалі. Значення менше 1 зменшує висоту елемента, а значення більше 1 збільшує його.

автор: Bond

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

Переглядачі

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

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

Приклади

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

При наведенні курсору на елемент він збільшується у висоту.

HTML

<div class="description">
  <h2>Приклад використання CSS-функції scaleY()</h2>
  <p>При наведенні курсору на елемент він збільшується у висоту.</p>
</div>

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

CSS

.description {
  text-align: left;
  margin-bottom: 20px;
  background-color: #f2f2f2;
  padding: 20px;
}

.description h2 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  margin-bottom: 10px;
}

.description p {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.result {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

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

.box:hover {
  transform: scaleY(2);
}

автор: Bond

Показує різницю між двома елементами, один з яких має змінену висоту.

HTML

<div class="description">
  <h2>Приклад використання CSS-функції scaleY()</h2>
  <p>Показує різницю між двома елементами, один з яких має змінену висоту.</p>
</div>

<div class="result">
  <div class="container">
    <div class="box"></div>
    <div class="box transformed"></div>
  </div>
</div>

CSS

.description {
  text-align: left;
  margin-bottom: 20px;
  background-color: #f2f2f2;
  padding: 20px;
}

.description h2 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  margin-bottom: 10px;
}

.description p {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.result {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

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

.box.transformed {
  transform: scaleY(0.5);
  background-color: red;
}

автор: Bond

Перша група — діаграма на scaleY(): усі стовпчики мають однакову висоту в розмітці, різниться лише множник, а transform-origin: bottom тримає їх на базовій лінії. Поруч — та сама діаграма без цього рядка, де стовпчики ростуть в обидва боки. Далі — що саме масштабується (рамка й текст теж), пара scaleY(-1) і scaleY(0), доказ того, що розкладка не змінюється, і невалідні записи.

HTML

<p class="head">Стовпчики діаграми: висота в розмітці однакова, різниться лише
    множник, а transform-origin: bottom тримає їх на базовій лінії:</p>
<div class="chart">
    <span class="col c1"></span><span class="col c2"></span><span class="col c3"></span>
    <span class="col c4"></span><span class="col c5"></span><span class="col c6"></span>
</div>

<p class="head">⚠️ Та сама діаграма без transform-origin: типова точка — центр,
    і стовпчики ростуть в обидва боки:</p>
<div class="chart nofix">
    <span class="col c1"></span><span class="col c2"></span><span class="col c3"></span>
    <span class="col c4"></span><span class="col c5"></span><span class="col c6"></span>
</div>

<p class="head">⚠️ Масштабується все намальоване — і рамка, і текст:</p>
<div class="grid">
    <figure><div class="stage"><div class="b">Аа</div></div><figcaption>без перетворення</figcaption></figure>
    <figure><div class="stage"><div class="b t2">Аа</div></div><figcaption>scaleY(2) — межі й літери витягнуто</figcaption></figure>
    <figure><div class="stage"><div class="b t3">Аа</div></div><figcaption>scaleY(0.4) — усе сплюснуто</figcaption></figure>
</div>

<p class="head">Два корисні окремі випадки: мінус одиниця дзеркалить вміст,
    не змінюючи рамки, а нуль схлопує елемент:</p>
<div class="grid">
    <figure><div class="stage"><div class="b m1">Аа</div></div><figcaption>scaleY(-1)</figcaption></figure>
    <figure><div class="stage"><div class="b m2">Аа</div></div><figcaption>scaleY(0) — висота 0</figcaption></figure>
    <figure><div class="stage"><div class="b m3">Аа</div></div><figcaption>scaleY(50%) — Firefox приймає, це 0.5</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="stage"><div class="b sm bad">0.5px</div></div><figcaption>scaleY(0.5px) — відкинуто</figcaption></figure>
    <figure><div class="stage"><div class="b sm bad2">()</div></div><figcaption>scaleY() — відкинуто</figcaption></figure>
    <figure><div class="stage"><div class="b sm good">1, 0.5</div></div><figcaption>scale(1, 0.5) — точний синонім scaleY(0.5)</figcaption></figure>
</div>

CSS

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

.chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 150px;
    padding: 0 10px;
    background: #f6f9ff;
    border-bottom: 2px solid #5a6472;
}

.col {
    width: 44px;
    height: 100px;
    background: #2f6fd0;
    transform-origin: bottom;
}

.chart.nofix .col {
    transform-origin: center;
}

.c1 { transform: scaleY(0.2); }
.c2 { transform: scaleY(0.45); }
.c3 { transform: scaleY(0.7); }
.c4 { transform: scaleY(0.9); }
.c5 { transform: scaleY(1.2); }
.c6 { transform: scaleY(1.4); }

.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: 150px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

.b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 60px;
    background: #3a9a4f;
    border: 6px solid #c0392b;
    color: #fff;
    font: 700 20px/1 ui-monospace, monospace;
}

.b.sm {
    font-size: 14px;
}

.t2 { transform: scaleY(2); }
.t3 { transform: scaleY(0.4); }
.m1 { transform: scaleY(-1); }
.m2 { transform: scaleY(0); }
.m3 { transform: scaleY(50%); }

.flow {
    display: flex;
    gap: 0;
    align-items: center;
    width: 360px;
    height: 150px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

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

.mid {
    background: #e08a1e;
    transform: scaleY(3);
}

.bad {
    background: #d64545;
    transform: scaleY(0.5px);
}

.bad2 {
    background: #d64545;
    transform: scaleY();
}

.good {
    background: #2f6fd0;
    transform: scale(1, 0.5);
}

автор: 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`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

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