Перспектива

Перспектива (Perspective) в CSS використовується для створення 3D-ефектів на веб-сайтах. Вона дозволяє визначити точку огляду для 3D-трансформацій, таких як обертання, нахил, зсув і т. д. Перспектива дає відчуття глибини та тривимірності, що може бути корисним для створення реалістичних анімацій і інтерактивних 3D-елементів.

Властивість perspective вказує відстань від очей глядача до площини, на якій відображається 3D-елемент. Чим більше значення perspective, тим більше враження глибини.

У перспективі всі предмети із віддаленням від глядача сходяться в одну точку.

Поворот вздовж осі X та Y

Функції rotateX(angle) та rotateY(angle) - це 3D трансформації, які дозволяють обертати елемент навколо його горизонтальної (ось X) або вертикальної (ось Y) вісі в 3D-просторі.

transform: rotateX(45deg); /* Обертання навколо осі X на 45 градусів */

transform: rotateY(-30deg); /* Обертання навколо осі Y на -30 градусів */

Але без перспективи ми побачимо цей ефект як на двовимірному кресленні - звуження, або розширення елемента.

Функція perspective()

Функція perspective() використовується для задання перспективи для 3D-трансформацій. Вона визначає, наскільки далеко розташована площина перспективи від глядача (користувача) та впливає на відображення елементів при застосуванні 3D-трансформацій.

perspective(distance);

distance: Відстань до площини перспективи. Зазвичай це значення в пікселях, але може бути вказано і в інших одиницях вимірювання.

Порефакторимо вище написаний код із врахуванням перспективи.

/* Обертання навколо осі X на 45 градусів */
transform: perspective(100px) rotateX(45deg);

/* Обертання навколо осі Y на -30 градусів */
transform: perspective(100px) rotateY(-30deg);

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

Властивість perspective

Властивість perspective дозволяє створити однакову перспективу цілій групі елементів на сцені. Ця властивість задається спільному контейнеру групи елементів (сцені), у нашому випадку це div з класом container. Ну і даму трансформацію потрібно прописати безпосереднім дітям.