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

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-трансформації. Додатне значення наближає елемент до глядача, від’ємне — віддаляє.

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

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

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

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

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

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

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