Трансформація Елементів для Динамічних Ефектів
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.css
Властивість translate3d()
Можна також додати зміщення елемента у 3D-просторі за допомогою однієї властивості. Проте, зазвичай користувачі мають 2D-екрани, і цей 3D-рух буде невидимим. Водночас все більше користувачів прагнуть відчути 3D-реальність. Тому незабаром більшість користувачів матимуть екрани з підтримкою трьох вимірів, і ця властивість стане корисною. Синтаксис виглядає так:
transform: translate3d(X_value, Y_value, Z-value);
Зміщення по осі z додається останнім значенням. Додатне значення — рух у напрямку до користувача. Від’ємне значення — рух у напрямку від користувача.
Розглянемо приклад:
index.html
index.css
Ймовірно, у вас, як і в мене, двовимірний екран, і ми не можемо помітити зміщення вздовж осі z.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.04Трансформація Елементів для Динамічних Ефектів
Свайпніть щоб показати меню
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.css
Властивість translate3d()
Можна також додати зміщення елемента у 3D-просторі за допомогою однієї властивості. Проте, зазвичай користувачі мають 2D-екрани, і цей 3D-рух буде невидимим. Водночас все більше користувачів прагнуть відчути 3D-реальність. Тому незабаром більшість користувачів матимуть екрани з підтримкою трьох вимірів, і ця властивість стане корисною. Синтаксис виглядає так:
transform: translate3d(X_value, Y_value, Z-value);
Зміщення по осі z додається останнім значенням. Додатне значення — рух у напрямку до користувача. Від’ємне значення — рух у напрямку від користувача.
Розглянемо приклад:
index.html
index.css
Ймовірно, у вас, як і в мене, двовимірний екран, і ми не можемо помітити зміщення вздовж осі z.
Дякуємо за ваш відгук!
