Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Трансформація Елементів для Динамічних Ефектів | Трансформація Елементів за Допомогою CSS
Просунуті техніки CSS

bookТрансформація Елементів для Динамічних Ефектів

translate() та translateZ() дозволяють переміщати елемент відносно його початкової позиції у певному напрямку. Ці функції є частиною властивості CSS transform. Додатково можна використовувати translateX() та translateY() для переміщення елемента лише по горизонталі або вертикалі.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);
  • translate() — приймає до 3 значень;
    • X_value — переміщення по осі x. Додатне значення переміщує елемент вправо, від’ємне — вліво;
    • Y_value — переміщення по осі y. Додатне значення переміщує елемент вниз, від’ємне — вгору;
    • Z_value — переміщення по осі z. Додатне значення наближає елемент до глядача, від’ємне — віддаляє. Якщо вказано лише 1 або 2 значення, браузер застосовує ті ж значення для відсутніх осей.
  • translateX() та translateY() — приймають по 1 значенню;
    • translateX(value) визначає горизонтальне переміщення. Додатне значення переміщує елемент вправо, від’ємне — вліво;
    • translateY(value) визначає вертикальне переміщення. Додатне значення переміщує елемент вниз, від’ємне — вгору.
  • translateZ() — приймає 1 значення. Визначає переміщення по осі z, що дозволяє створювати 3D-трансформації. Додатне значення наближає елемент до глядача, від’ємне — віддаляє.

Розглянемо, яких результатів можна досягти за допомогою цих функцій:

index.html

index.html

index.css

index.css

copy

Властивість translate3d()

Можна також додати зміщення елемента у 3D-просторі за допомогою однієї властивості. Проте, зазвичай користувачі мають 2D-екрани, і цей 3D-рух буде невидимим. Водночас все більше користувачів прагнуть відчути 3D-реальність. Тому незабаром більшість користувачів матимуть екрани з підтримкою трьох вимірів, і ця властивість стане корисною. Синтаксис виглядає так:

transform: translate3d(X_value, Y_value, Z-value);

Зміщення по осі z додається останнім значенням. Додатне значення — рух у напрямку до користувача. Від’ємне значення — рух у напрямку від користувача.

Розглянемо приклад:

index.html

index.html

index.css

index.css

copy

Ймовірно, у вас, як і в мене, двовимірний екран, і ми не можемо помітити зміщення вздовж осі z.

question mark

За допомогою якої функції можна перемістити елемент від його початкового положення вниз на 30px?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 5

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.04

bookТрансформація Елементів для Динамічних Ефектів

Свайпніть щоб показати меню

translate() та translateZ() дозволяють переміщати елемент відносно його початкової позиції у певному напрямку. Ці функції є частиною властивості CSS transform. Додатково можна використовувати translateX() та translateY() для переміщення елемента лише по горизонталі або вертикалі.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);
  • translate() — приймає до 3 значень;
    • X_value — переміщення по осі x. Додатне значення переміщує елемент вправо, від’ємне — вліво;
    • Y_value — переміщення по осі y. Додатне значення переміщує елемент вниз, від’ємне — вгору;
    • Z_value — переміщення по осі z. Додатне значення наближає елемент до глядача, від’ємне — віддаляє. Якщо вказано лише 1 або 2 значення, браузер застосовує ті ж значення для відсутніх осей.
  • translateX() та translateY() — приймають по 1 значенню;
    • translateX(value) визначає горизонтальне переміщення. Додатне значення переміщує елемент вправо, від’ємне — вліво;
    • translateY(value) визначає вертикальне переміщення. Додатне значення переміщує елемент вниз, від’ємне — вгору.
  • translateZ() — приймає 1 значення. Визначає переміщення по осі z, що дозволяє створювати 3D-трансформації. Додатне значення наближає елемент до глядача, від’ємне — віддаляє.

Розглянемо, яких результатів можна досягти за допомогою цих функцій:

index.html

index.html

index.css

index.css

copy

Властивість translate3d()

Можна також додати зміщення елемента у 3D-просторі за допомогою однієї властивості. Проте, зазвичай користувачі мають 2D-екрани, і цей 3D-рух буде невидимим. Водночас все більше користувачів прагнуть відчути 3D-реальність. Тому незабаром більшість користувачів матимуть екрани з підтримкою трьох вимірів, і ця властивість стане корисною. Синтаксис виглядає так:

transform: translate3d(X_value, Y_value, Z-value);

Зміщення по осі z додається останнім значенням. Додатне значення — рух у напрямку до користувача. Від’ємне значення — рух у напрямку від користувача.

Розглянемо приклад:

index.html

index.html

index.css

index.css

copy

Ймовірно, у вас, як і в мене, двовимірний екран, і ми не можемо помітити зміщення вздовж осі z.

question mark

За допомогою якої функції можна перемістити елемент від його початкового положення вниз на 30px?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 5
some-alt