CSS Perspective Generator BÉTA

A CSS-ben a perspective tulajdonságot a 3D transzformációkkal együtt használják az elemek perspektivikus mélységének szabályozására. Meghatározza, hogy mennyi perspektívát vagy mélységet kell alkalmazni egy 3D-transzformált elemre, mélység- és távolságérzetet adva neki.

A perspective tulajdonság egy hosszértéket vesz fel, általában pixelben vagy más hosszúsági egységben mérve, a perspektíva mélységének meghatározásához. Minél nagyobb az érték, annál kifejezettebb lesz a perspektívahatás. A kisebb értékek kevésbé észrevehető perspektívát eredményeznek.

Itt van a perspektíva tulajdonság használatának alapvető szintaxisa:

Ebben a példában:

• A .perspective-element osztály a 3D-transzformált elem perspektíváját 1000 pixelre állítja be. Ez az érték határozza meg a perspektíva mélységét.

A perspektíva tulajdonságot általában a 3D transzformációs függvényekkel, például a rotateX(), rotateY() és translateZ() függvényekkel együtt használjuk, hogy 3D-s hatást hozzunk létre az elemeken, közelebb vagy távolabbra helyezve őket a nézőtől.

Íme egy egyszerű példa a perspektíva használatára egy 3D-transzformált elemmel:

Ebben az esetben az elem 1000 pixeles perspektívával rendelkezik, és az Y tengelyen elforgatva és a Z tengelyen elfordítva 3D hatást kelt.

A perspektivikus tulajdonság különösen hasznos a 3D-s transzformációk és animációk létrehozásához a webdesignban és a felhasználói felületeken, mivel az elemeknek valósághű mélységérzetet és térbeli pozícionálást ad.