css.in.ua
Підтримати

CSS function scaleX()

Опис

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

Функція scaleX() приймає один числовий аргумент - scaleX(x), де x вказує масштаб, до якого слід змінити ширину елемента. Значення менше 1 стискає елемент, а значення більше 1 розтягує його. Значення 1 залишить ширину елемента без змін.

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

/* Збільшимо ширину елемента вдвічі */
.example-element {
  transform: scaleX(2);
}

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

Порада:

При використанні функції scaleX() слід враховувати відносну ширину батьківського контейнера елемента, оскільки вона може впливати на кінцевий результат.
Порада:

Використовуйте значення менше 1 для стиснення елемента і значення більше 1 для розтягнення. Значення 1 залишить ширину елемента без змін.
Порада:

При використанні функції scaleX() зверніть увагу на можливі впливи на інші властивості елемента, такі як позиціонування або розташування тексту.
Порада:

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

Синтаксис

scaleX(<value>);
<number>

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

Переглядачі

Переглядач

1

3.5

3.1

10.5

12

9
Переглядач

2

18

4

3.2

Мобільних переглядачів ще не додано.

Приклади


У цьому прикладі є прямокутник (#box), який збільшує свою ширину вдвічі (scaleX(2)) після того, як користувач наведе курсор на нього. Це досягається за допомогою CSS-властивості transform та анімації (transition).

У цьому прикладі є два прямокутники (box), один з яких має нормальний масштаб (scaleX(1)), а другий зменшений наполовину (scaleX(0.5)) по осі X.

Документи

Зв'язок