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