Perspektyva - CSS-gudrybės | CSS almanachas 2025

perspectiveCSS nuosavybė suteikia elementas 3D-erdvėje įtakos atstumas tarp Z plokštumoje ir vartotojui.

Poveikio stiprumą lemia vertė. Kuo mažesnė vertė, tuo arčiau jūs einate iš Z plokštumos ir tuo įspūdingesnis yra vaizdo efektas. Kuo didesnė vertė, tuo subtilesnis bus efektas.

Svarbu: atkreipkite dėmesį, kad perspektyvinė ypatybė neturi įtakos elemento atvaizdavimui; tai tiesiog įgalina 3D erdvę vaikams. Tai yra pagrindinis transform: perspective()funkcijos ir perspectivenuosavybės skirtumas . Pirmasis suteikia elemento gylį, o vėliau sukuria 3D erdvę, kuria dalijasi visi jos transformuoti vaikai.

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

Patikrinkite šį rašiklį!

Pirmiau pateikta demonstracija siekiama parodyti skirtumą tarp funkcijos ir nuosavybės.

Kairėje pusėje galite pamatyti nuosavybę, pritaikytą perspective: 50emtransformuotų elementų ( transform: rotateY(50deg)) tėvams ( ).
Dešinėje pusėje perspektyva taikoma iš pertvarkos tiesiai į vaikus ( transform: perspective(50em) rotateY(50deg)).

Tai rodo, kaip nustatant perspektyvą tėvams visi vaikai turi tą pačią 3D erdvę ir tuo pačiu nykstantį tašką.

Pabandykime ką nors dar šaunesnio: kubą su 3D transformacijomis ir perspektyva.

Patikrinkite šį rašiklį!

Štai kaip kubas yra pagamintas: jis remiasi dviem įdėtomis vyniotuvomis (viena suteikia kubui perspektyvos, o kita - visų pusių apvyniojimui) ir 6 elementai, kad padarytų šonus. Kiekvienam elementui suteikiamas savas transformacijos mišinys, verčiantis ir besisukantis 3D erdvėje (pvz. transform: rotateX(90deg) translateZ(1em)).

Pabaigokime demonstracinę versiją, kuri galėtų būti tikrojo pasaulio dizaino pagrindas: nuotraukų siena + antraštės, naudojant perspektyvą ir transformaciją.