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

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

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

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

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

// Встановлення перспективи
element.style.perspective = '500px';

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

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

element.style.perspective приймає значення, яке може бути задано в будь-якій одиниці довжини, такій як пікселі (px) або відсотки (%). Наприклад, 500px або 50%. Значення none означає, що перспектива не застосовується, і 3D-трансформації не матимуть перспективного ефекту.

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

Перспектива працює разом з іншими CSS-трансформаціями, такими як rotateY, rotateX, translateZ, та іншими. Це дозволяє створювати складні тривимірні ефекти.

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

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

У цьому прикладі перспектива встановлена на 1000 пікселів для контейнера, а внутрішній елемент обертається на 45 градусів по осі Y. Це створює враження тривимірного обертання внутрішнього елемента в просторі.

Анімація перспективи

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

let element = document.getElementById('container');
element.style.transition = 'perspective 1s';
element.style.perspective = '800px';

element.addEventListener('mouseenter', () => {
    element.style.perspective = '400px';
});

element.addEventListener('mouseleave', () => {
    element.style.perspective = '800px';
});

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

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

Синтаксис

element.style.perspective

Значення

Return

Переглядачі

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

Приклади

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

// Динамічне створення 3D-каруселі зображень
let carousel = document.getElementById('carousel');
carousel.style.perspective = '800px';

let images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'];
images.forEach((src, index) => {
    let img = document.createElement('img');
    img.src = src;
    img.style.position = 'absolute';
    img.style.transform = `rotateY(${index * 90}deg) translateZ(300px)`;
    carousel.appendChild(img);
});

// Анімація каруселі
let angle = 0;
setInterval(() => {
    angle += 90;
    carousel.style.transform = `rotateY(${angle}deg)`;
}, 2000);

// Створення 3D-куба з текстових елементів
let cube = document.getElementById('cube');
cube.style.perspective = '600px';

let faces = ['front', 'back', 'left', 'right', 'top', 'bottom'];
faces.forEach(face => {
    let div = document.createElement('div');
    div.className = face;
    div.textContent = face;
    div.style.position = 'absolute';
    switch (face) {
        case 'front':
            div.style.transform = 'rotateY(0deg) translateZ(100px)';
            break;
        case 'back':
            div.style.transform = 'rotateY(180deg) translateZ(100px)';
            break;
        case 'left':
            div.style.transform = 'rotateY(-90deg) translateZ(100px)';
            break;
        case 'right':
            div.style.transform = 'rotateY(90deg) translateZ(100px)';
            break;
        case 'top':
            div.style.transform = 'rotateX(90deg) translateZ(100px)';
            break;
        case 'bottom':
            div.style.transform = 'rotateX(-90deg) translateZ(100px)';
            break;
    }
    cube.appendChild(div);
});

// Обертання куба
let rotateX = 0;
let rotateY = 0;
document.addEventListener('keydown', event => {
    if (event.key === 'ArrowUp') rotateX -= 10;
    if (event.key === 'ArrowDown') rotateX += 10;
    if (event.key === 'ArrowLeft') rotateY -= 10;
    if (event.key === 'ArrowRight') rotateY += 10;
    cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});