Перспектива - CSS-хитрощі

perspectiveВластивість CSS дає елемент 3D-простір, впливаючи на відстань між Z площині і користувачем.

Сила ефекту визначається величиною. Чим менше значення, тим ближче ви наближаєтесь до площини Z і тим вражаючий візуальний ефект. Чим більше значення, тим тоншим буде ефект.

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

/** * Syntax * perspective: none |  */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); )

Перевірте цю ручку!

Наведене вище демонстраційне завдання має на меті показати різницю між функцією та властивістю.

Ліворуч ви можете побачити властивість, застосовану до батьківського perspective: 50emелемента ( transform: rotateY(50deg)) перетворених елементів ( ).
Праворуч перспектива застосовується від перетворення безпосередньо до дітей ( transform: perspective(50em) rotateY(50deg)).

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

Давайте спробуємо щось ще крутіше: куб із 3D-перетвореннями та перспективою.

Перевірте цю ручку!

Ось як робиться куб: він спирається на дві вкладені обгортки (одну, щоб надати кубу перспективу, і одну, щоб обернути всі сторони) та 6 елементів, щоб зробити боки. Кожен елемент отримує своє власне перетворення, що змішує переклад та обертання в 3D-просторі (наприклад transform: rotateX(90deg) translateZ(1em)).

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