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

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

Порада

Пам’ятайте, що перспектива працює найкраще, коли дочірні елементи мають свої власні тривимірні трансформації. Використовуйте властивості, такі як rotateY, rotateX, translateZ, щоб створити реалістичний 3D-ефект. Це дозволяє вашим елементам взаємодіяти один з одним у тривимірному просторі, підсилюючи відчуття глибини і реальності.

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

Порада

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

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

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

Синтаксис

element.style.perspective

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

// Динамічне створення 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);

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

// Створення 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)`;
});