JS властивість CSSStyleDeclaration.backfaceVisibility
Загальний опис
backfaceVisibility – це CSS-властивість, яка контролює, чи буде видимою задня сторона елемента, коли той обертається в просторі.
Коли ми використовуємо CSS для створення тривимірних (3D) трансформацій елементів, може виникнути ситуація, коли елемент повертається таким чином, що його задня сторона стає видимою користувачу. Властивість backfaceVisibility дозволяє вам контролювати, чи буде ця задня сторона відображатися чи ні.
Основні значення, які можна задати цій властивості:
"visible"– задня сторона елемента буде видимою, навіть якщо він повернений обличчям назад."hidden"– задня сторона елемента не буде видимою, коли він повернений обличчям назад.
Зазвичай, цю властивість використовують разом із CSS-трансформаціями, наприклад, rotateY, rotateX, щоб створювати ефекти повороту елементів на веб-сторінці.
Ось як можна використовувати element.style.backfaceVisibility в JavaScript:
// Знаходимо елемент на сторінці
let element = document.getElementById("myElement");
// Застосовуємо тривимірну трансформацію та налаштовуємо видимість задньої сторони
element.style.transform = "rotateY(180deg)";
element.style.backfaceVisibility = "hidden";
У цьому прикладі елемент обертається на 180 градусів по осі Y, а його задня сторона стає невидимою завдяки властивості backfaceVisibility, встановленій у значення "hidden".
Використання backfaceVisibility особливо корисне при створенні анімацій карток, що перевертаються, де вам потрібно приховати вміст задньої сторони під час обертання. Наприклад, при створенні ефекту "перевертання" картки, ви можете використовувати цю властивість, щоб зробити анімацію плавною та позбавленою небажаних візуальних артефактів.
Щоб перевірити, як працює ця властивість, ви можете змінювати значення backfaceVisibility між "visible" і "hidden", спостерігаючи, як змінюється поведінка елемента при обертанні.
Хоча ця властивість часто використовується в CSS, JavaScript дозволяє динамічно змінювати її значення в залежності від логіки вашого застосунку, забезпечуючи тим самим більш інтерактивний досвід для користувачів.
Підсумовуючи, element.style.backfaceVisibility дає можливість контролювати, чи буде відображатися задня сторона елемента під час тривимірної трансформації, що є важливим для створення професійних та акуратних інтерфейсів.
| Порада: | Завжди перевіряйте сумісність із браузерами, оскільки не всі версії браузерів однаково підтримують властивості, пов'язані з 3D-трансформаціями. Хоча сучасні браузери зазвичай підтримують |
| Порада: |
|
| Порада: | Використання значення |
Синтаксис
element.style.backfaceVisibilityЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачу взаємодіяти з тривимірною карткою: натисканням кнопки картка перевертається, а за допомогою перемикача можна вибрати, чи буде видимою задня сторона картки під час перевертання. Це допоможе зрозуміти, як backfaceVisibility впливає на вигляд елементів під час тривимірних трансформацій.
У цьому прикладі показано, як можна динамічно перевертати картку на сторінці за допомогою подвійного натискання (dblclick). Коли картка перевертається на 180 градусів, властивість backfaceVisibility встановлюється на "hidden", щоб приховати задню сторону картки, що забезпечує більш плавний і приємний для користувача візуальний ефект.
let card = document.getElementById("card");
let isFlipped = false;
card.addEventListener("dblclick", function() {
if (isFlipped) {
card.style.transform = "rotateY(0deg)";
card.style.backfaceVisibility = "hidden";
} else {
card.style.transform = "rotateY(180deg)";
card.style.backfaceVisibility = "hidden";
}
isFlipped = !isFlipped;
});
Цей приклад демонструє, як можна створити автоматичне переключення між різними блоками контенту кожні три секунди. Використовуючи обертання по осі X і змінюючи backfaceVisibility, ми можемо показувати або приховувати задню сторону елемента, створюючи ефект перевертання між двома різними сторінками або частинами контенту в одному і тому ж контейнері. Це корисно для створення інтерактивних презентацій або каруселей контенту.
let container = document.getElementById("container");
let isFrontVisible = true;
function switchContent() {
if (isFrontVisible) {
container.style.transform = "rotateX(180deg)";
container.style.backfaceVisibility = "hidden";
} else {
container.style.transform = "rotateX(0deg)";
container.style.backfaceVisibility = "visible";
}
isFrontVisible = !isFrontVisible;
}
setInterval(switchContent, 3000);