CSS function scaleY()
Опис
scaleY() - це функція трансформації CSS, яка дозволяє змінювати масштаб елемента по вертикалі. Вона використовується разом з властивістю transform, яка може бути задана для елемента або його псевдоелемента.
Ця функція приймає один числовий аргумент - scaleY(y), де y - це коефіцієнт масштабування для вертикального напрямку. Значення менше 1 зменшує висоту елемента, а значення більше 1 збільшує його. Наприклад, scaleY(0.5) зменшить висоту елемента до половини його оригінальної висоти, а scaleY(2) подвоїть його висоту.
Приклад використання:
/* Зменшимо висоту елемента до половини його оригінальної висоти */
.example-element {
transform: scaleY(0.5);
}
У даному прикладі елемент з класом "example-element" буде зменшений до половини його оригінальної висоти, створюючи ефект збільшення простору навколо нього.
Ця функція дозволяє створювати цікаві ефекти веб-дизайну. Наприклад, ви можете використовувати її для анімаційного збільшення або зменшення висоти елемента під час інтерактивності користувача. Вона також працює разом з іншими функціями трансформації, такими як scaleX() для масштабування по горизонталі, rotate() для повороту елемента, translate() для зсуву та іншими, що дозволяє створювати складні та креативні ефекти трансформації для елементів вашої веб-сторінки.
| Порада: | Використовуйте значення менше |
| Порада: | Застосовуйте значення більше |
| Порада: | Пам'ятайте, що значення |
| Нотатка: | Функцію |
Синтаксис
scaleY(value);<value>Числове значення, яке вказує масштабування елемента по вертикалі. Значення менше
1зменшує висоту елемента, а значення більше1збільшує його.
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
1 |
3.5 |
3.1 |
10.5 |
12 |
9 |
| Переглядач | ||||
|---|---|---|---|---|
2 |
18 |
4 |
3.2 |
Мобільних переглядачів ще не додано.
Приклади
При наведенні курсору на елемент він збільшується у висоту.
Показує різницю між двома елементами, один з яких має змінену висоту.