perspectiveЦСС имовина даје елеменат 3Д-простор утиче на удаљеност између З равни и корисника.
Снага ефекта се одређује према вредности. Што је вредност мања, приближавате се З равни и визуелни ефекат је импресивнији. Што је већа вредност, ефекат ће бити суптилнији.
Важно: Имајте на уму да својство перспективе не утиче на то како се елемент приказује; то једноставно омогућава 3Д простор за елементе деце. Ово је главна разлика између transform: perspective()функције и perspectiveсвојства. Први даје дубину елемента, док други ствара 3Д-простор који деле сва његова трансформисана деца.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) Горњи демо има за циљ да прикаже разлику између функције и својства.
- На левој страни можете видети својство примењено на родитеља (
perspective: 50em) трансформисаних елемената (transform: rotateY(50deg)). - На десној страни, перспектива се примењује од трансформације директно на децу (
transform: perspective(50em) rotateY(50deg)).
То показује како перспектива постављања родитеља чини да сва деца деле исти 3Д простор и самим тим исту тачку нестајања.
Покушајмо нешто још хладније: коцку са 3Д трансформацијама и перспективом.
Ево како је направљена коцка: ослања се на два угнежђена омотача (један који даје коцки перспективу, а други за умотавање свих страница) и 6 елемената за израду страница. Сваки елемент добија сопствену трансформацију мешањем превођења и ротирања у 3Д простору (нпр. transform: rotateX(90deg) translateZ(1em)).
Завршимо са демонстрацијом која приказује шта би могло бити основа дизајна из стварног света: зид од фотографија + натписи који користе перспективу и трансформишу.
Када лебде изнад зида, деца се враћају у нормалан положај, поништавајући ефекат.
Важно! Коришћење перспективе (са вредношћу која се разликује од 0 или ниједне) ствара нови контекст слагања.
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 12+ | Било који | 10+ | Ниједан | 10+ | 3+ | Било који |
Фирефок-у 10-15 треба -моз-, ВебКит прегледачима можда треба -вебкит-