Перспектива

За замовчуванням елемент рендериться у 2D-просторі та, у разі трансформацій, - по осях X та Y, наприклад rotate, викривляється і виглядає неприродно.

У прикладі елементи div.box повернені на 45 градусів по осях X та Y. Вони виглядають плоскими і викривленими, тому що їм не вистачає перспективи, тобто глибини сцени.

Функція perspective()

Це ще одна функція трансформації для властивості transform, яка дозволяє задати перспективу одному елементу, до якого застосовується.

Встановивши perspective(400px), ми говоримо браузеру про необхідність рендерити div.box у 3D-просторі, додаючи елементу глибину сцени та об'єм. Значення 400px - це відстань до сцени, на якій знаходиться елемент. Що менше значення, то ближче глядач до сцени і навпаки.

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

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

Дозволяє створити однакову перспективу цілій групі елементів на сцені. Ця властивість задається спільному контейнеру групи елементів (сцені), у нашому випадку - div.scene.