perspectiveCSS vara annab elemendile 3D-ruumi mõjutavate vahemaa Z lennuk ja kasutaja.
Mõju tugevuse määrab väärtus. Mida väiksem on väärtus, seda lähemale jõuate Z-tasapinnast ja seda muljetavaldavam on visuaalne efekt. Mida suurem on väärtus, seda peenem on efekt.
NB! Pange tähele, et perspektiivvara ei mõjuta elemendi renderdamist; see võimaldab lihtsalt 3D-ruumi laste elementidele. See on peamine erinevus transform: perspective()funktsiooni ja perspectiveomaduse vahel. Esimene annab elemendi sügavuse, teine loob 3D-ruumi, mida jagavad kõik selle ümberkujunenud lapsed.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) Ülaltoodud demo eesmärk on näidata funktsiooni ja omaduse erinevust.
- Vasakul küljel näete
perspective: 50emteisendatud elementide (transform: rotateY(50deg)) vanemale ( ) rakendatud omadust . - Paremal küljel rakendatakse perspektiivi teisendusest otse lastele (
transform: perspective(50em) rotateY(50deg)).
See näitab, kuidas vanema perspektiivi seadmine paneb kõik lapsed jagama sama 3D-ruumi ja seega sama kaduvat punkti.
Proovime midagi veelgi lahedamat: 3D-teisenduste ja perspektiiviga kuup.
Kuubi valmistamine toimub järgmiselt: see tugineb kahele pesastatud ümbrisele (ühele, mis annab kuubile perspektiivi ja teisele, et ümbritseda kõiki külgi) ja 6 elemendile, et teha külgi. Igale elemendile antakse oma teisendusmiks, mis tõlgib ja pöörleb 3D-ruumis (nt transform: rotateX(90deg) translateZ(1em)).
Lõpetame demoga, mis sisaldab tõelise maailma kujunduse alust: fotode sein + pealdised, kasutades perspektiivi ja teisendust.
Seina kohal hõljudes pööratakse lapsed tagasi tavapärasesse asendisse, tühistades efekti.
Tähtis! Perspektiivi kasutamine (väärtusega 0 või mitte muu) loob uue virnastamise konteksti.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | Ükskõik | 10+ | Puudub | 10+ | 3+ | Ükskõik |
Firefox 10-15 vajab -moz-, WebKiti brauserid võivad vajada -webkit-