CSS function translateY
Опис
translateY() - ця функція в CSS використовується для зсуву елемента по вертикалі. Вона дозволяє змінювати положення елемента відносно його вихідної позиції вздовж вертикальної осі.
Приклад використання:
Для зсуву елемента на 100 пікселів вниз, використовуйте такий CSS:
transform: translateY(100px);
Цей код зсуне елемент вниз на 100 пікселів від його початкового положення.
Значення, що вказуються в функції translateY(), можуть бути позитивними або негативними. Позитивне значення зсуває елемент вниз, а негативне - вгору. Наприклад, такий код:
transform: translateY(-50%);
зсуне елемент вгору на 50% від його висоти.
- Порада
-
Позитивне значення зсуває елемент вниз, а негативне - вгору.
автор: Bond - Порада
-
Значення може бути вказане в пікселях (
автор: Bondpx), відсотках (%), відносних одиницях (em,rem) або використовувати ключові слова, такі якtop,bottom,centerі т.д. - Порада
-
Ця функція дозволяє легко контролювати вертикальне положення елементів і може бути корисною для створення ефектів паралаксу, рухомих анімацій та вирівнювання елементів по вертикалі. Ви можете використовувати різні одиниці вимірювання або ключові слова, щоб досягти бажаного зсуву. За допомогою функції
автор: BondtranslateY()можна створювати захоплюючі та динамічні ефекти на вашому веб-сайті.
Синтаксис
transform: translateY(value);Функція translateY може отримувати 3 значень:
-
<length> -
Величина зсуву в пікселях/відсотках/відносних одиницях
автор: Bond -
<word> -
Ключові слова, які визначають положення елемента, наприклад left, right, center і т.д.
автор: Bond -
<number> -
Число без одиниці вимірювання. В початковій системі координат еквівалентно пікселям у батьківському середовищі.
автор: Bond
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 1 | 3.5 | 3.1 | 10.5 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Інтерактивний приклад з різними значеннями.
Цей простий приклад демонструє різницю між звичайним блоком і блоком, який використовує функцію translateY().
Коментарі
Коментарів ще немає — будьте першим!