CSS function scaleX

Опис

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

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

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

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

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

автор: Bond

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

Синтаксис

scaleX(<value>);

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

<number>

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

автор: Bond

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

Переглядачі

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

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

Приклади

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

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

автор: Bond

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

автор: Bond

Коментарі

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