Skip to main content

Що робить transform: perspective()?

CSSJunior~1 хв читання
Запропонувати правку

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

Важливо: коли perspective() використовується всередині transform, вона застосовується тільки до цього елемента, а не до всіх дочірніх.

Приклад:

css
.box { transform: perspective(600px) rotateY(45deg); }

Де 600px - відстань від «камери» до об'єкта (чим менше значення, тим сильніша перспектива).

Різниця з perspective як окремою властивістю

css
.container { perspective: 600px; /* впливає на всі 3D-трансформації всередині контейнера */ }
  • perspective (окрема властивість) - задає перспективу для всіх дітей
  • perspective() у transform - тільки для конкретного елемента

Підсумок

transform: perspective(X) - створює 3D-ефект глибини для елемента, впливаючи на сприйняття обертань та інших 3D-трансформацій.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку