perspectiveCSS īpašums dod elements 3D-vietu, kas ietekmē attālumu starp Z plaknē un lietotāju.
Efekta stiprumu nosaka vērtība. Jo mazāka vērtība, jo tuvāk jūs nonākat no Z plaknes un jo iespaidīgāks ir vizuālais efekts. Jo lielāka vērtība, jo smalkāks būs efekts.
Svarīgi! Lūdzu, ņemiet vērā, ka perspektīvais rekvizīts neietekmē elementa renderēšanu; tas vienkārši ļauj 3D telpu bērnu elementiem. Šī ir galvenā atšķirība starp transform: perspective()funkciju un perspectiveīpašumu. Pirmais dod elementa dziļumu, bet vēlāk izveido 3D telpu, kas ir kopīga visiem tās pārveidotajiem bērniem.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) Iepriekš minētā demonstrācijas mērķis ir parādīt atšķirību starp funkciju un īpašumu.
- Kreisajā pusē varat redzēt rekvizītu, kas piemērots
perspective: 50empārveidoto elementu vecākam (transform: rotateY(50deg)). - Labajā pusē perspektīva tiek piemērota no transformācijas tieši uz bērniem (
transform: perspective(50em) rotateY(50deg)).
Tas parāda, kā vecāku perspektīvas iestatīšana liek visiem bērniem dalīties vienā un tajā pašā 3D telpā un tādējādi vienā un tajā pašā izzušanas punktā.
Izmēģināsim kaut ko vēl foršāku: kubu ar 3D transformācijām un perspektīvu.
Lūk, kā kubs tiek izgatavots: tas balstās uz diviem ligzdotiem ietinējiem (vienu, lai kubs būtu perspektīvs, un otru, lai aptinātu visas malas) un 6 elementus, lai izveidotu malas. Katram elementam tiek dota sava transformācijas sajaukšanās, kas tulkojas un rotē 3D telpā (piemēram transform: rotateX(90deg) translateZ(1em)).
Pabeigsim ar demonstrāciju, kas atspoguļo reālās pasaules dizaina pamatu: fotogrāfiju siena + paraksti, izmantojot perspektīvu un transformāciju.
Virzot kursoru virs sienas, bērni tiek pagriezti atpakaļ normālā stāvoklī, atceļot efektu.
Svarīgs! Izmantojot perspektīvu (ar vērtību, kas atšķiras no 0 vai nav), tiek izveidots jauns sakraušanas konteksts.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | Jebkurš | 10+ | Nav | 10+ | 3+ | Jebkurš |
Firefox 10-15 nepieciešams -moz-, WebKit pārlūkiem var būt nepieciešams -webkit-