JS властивість CSSStyleDeclaration.perspectiveOrigin

Загальний опис

element.style.perspectiveOrigin – це властивість CSS, яка визначає початкову точку перспективи для 3D-трансформацій відносно елемента. Вона дозволяє змінювати позицію вихідної точки перспективи, що впливає на вигляд тривимірних об'єктів при перегляді їх під різними кутами.

Щоб використовувати element.style.perspectiveOrigin в JavaScript, спочатку потрібно вибрати HTML-елемент, до якого ви хочете застосувати цю властивість. Найчастіше це робиться за допомогою методів document.querySelector або document.getElementById.

// Вибір елемента за ID
let element = document.getElementById('container');

// Встановлення початкової точки перспективи
element.style.perspectiveOrigin = '50% 50%';

У цьому прикладі початкова точка перспективи встановлена в центрі елемента з ID container. Це значення за замовчуванням, яке означає, що перспектива починається з центральної точки елемента.

Значення властивості

element.style.perspectiveOrigin приймає два значення, які можуть бути задані у відсотках, пікселях або інших одиницях довжини. Перше значення визначає горизонтальну позицію, а друге – вертикальну. Наприклад, 0% 0% означає верхній лівий кут, 100% 100% – нижній правий кут, а 50px 100px зміщує початкову точку на 50 пікселів вправо і 100 пікселів вниз.

Використання з тривимірними трансформаціями

Перспектива і початкова точка перспективи працюють разом для створення реалістичних 3D-ефектів. Зміна початкової точки перспективи може значно вплинути на вигляд об'єктів при їх обертанні або переміщенні у тривимірному просторі.

let container = document.getElementById('container');
container.style.perspective = '800px';
container.style.perspectiveOrigin = 'left top';

let box = document.getElementById('box');
box.style.transform = 'rotateY(45deg)';

У цьому прикладі перспектива встановлена на 800 пікселів, а початкова точка перспективи зміщена до верхнього лівого кута. Об'єкт box обертається на 45 градусів по осі Y, що створює ефект, ніби він обертається навколо верхнього лівого кута контейнера.

Динамічна зміна початкової точки перспективи

Ви можете динамічно змінювати початкову точку перспективи, щоб створити інтерактивні ефекти. Наприклад, можна змінювати perspectiveOrigin у відповідь на рух миші або інші події користувача.

let container = document.getElementById('container');
container.style.perspective = '1000px';

document.addEventListener('mousemove', (event) => {
    let xPercent = (event.clientX / window.innerWidth) * 100;
    let yPercent = (event.clientY / window.innerHeight) * 100;
    container.style.perspectiveOrigin = `${xPercent}% ${yPercent}%`;
});

У цьому прикладі початкова точка перспективи змінюється відповідно до позиції миші, що створює ефект, ніби об'єкт слідує за курсором. Це додає інтерактивності та покращує користувацький досвід, роблячи веб-сторінку більш динамічною і привабливою.

element.style.perspectiveOrigin є важливим інструментом для налаштування тривимірних сцен у веб-дизайні. Використовуючи цю властивість, ви можете змінювати вигляд і поведінку тривимірних об'єктів, створюючи реалістичні та привабливі ефекти для покращення візуального сприйняття вашого контенту.

Синтаксис

element.style.perspectiveOrigin

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Приклад 1: Інтерактивне обертання елемента з динамічною зміною точки перспективи
let container = document.getElementById('container');
container.style.perspective = '800px';

document.addEventListener('mousemove', (event) => {
    let xPercent = (event.clientX / window.innerWidth) * 100;
    let yPercent = (event.clientY / window.innerHeight) * 100;
    container.style.perspectiveOrigin = `${xPercent}% ${yPercent}%`;
    
    let box = document.getElementById('box');
    box.style.transform = `rotateX(${yPercent - 50}deg) rotateY(${xPercent - 50}deg)`;
});

// Приклад 2: Анімація перспективи при прокручуванні сторінки
let container = document.getElementById('container');
container.style.perspective = '1200px';

window.addEventListener('scroll', () => {
    let scrollPosition = window.scrollY / (document.body.scrollHeight - window.innerHeight);
    let perspectiveOriginY = scrollPosition * 100;
    container.style.perspectiveOrigin = `50% ${perspectiveOriginY}%`;
    
    let box = document.getElementById('box');
    box.style.transform = `rotateX(${scrollPosition * 360}deg)`;
});