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 є важливим інструментом для налаштування тривимірних сцен у веб-дизайні. Використовуючи цю властивість, ви можете змінювати вигляд і поведінку тривимірних об'єктів, створюючи реалістичні та привабливі ефекти для покращення візуального сприйняття вашого контенту.

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.perspectiveOrigin

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="container">Демонстраційний елемент</div>
<div id="box">Демонстраційний елемент</div>

// Приклад 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)`;
});

<div id="container" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<div id="box">Демонстраційний елемент</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

// Приклад 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)`;
});