Perspektif - CSS Hileleri | CSS Almanak 2024

perspectiveCSS özelliği bir elemanının, Z düzleminde ve kullanıcı arasındaki mesafeyi etkileyen bir 3D-space verir.

Etkinin gücü değere göre belirlenir. Değer ne kadar küçükse, Z düzleminden o kadar yakınlaşır ve görsel efekt o kadar etkileyici olur. Değer ne kadar büyükse, etki o kadar ince olacaktır.

Önemli: Perspektif özelliğinin öğenin nasıl işlendiğini etkilemediğini lütfen unutmayın; basitçe çocuk öğeleri için bir 3 boyutlu alan sağlar. Bu, transform: perspective()işlev ve perspectiveözellik arasındaki temel farktır . İlki öğe derinliği verirken, daha sonra dönüştürülmüş tüm çocukları tarafından paylaşılan bir 3B alan yaratır.

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

Bu Kaleme bakın!

Yukarıdaki demo, işlev ve mülk arasındaki farkı göstermeyi amaçlamaktadır.

Sol tarafta, perspective: 50emdönüştürülmüş öğelerin ( transform: rotateY(50deg)) parent ( ) öğesine uygulanan özelliği görebilirsiniz .
Sağ tarafta, perspektif dönüşümden doğrudan çocuklara ( transform: perspective(50em) rotateY(50deg)) uygulanır.

Bu, ebeveyn üzerinde perspektif belirlemenin tüm çocukları nasıl aynı 3B alanı ve dolayısıyla aynı ufuk noktasını paylaştığını gösterir.

Daha da havalı bir şey deneyelim: 3D dönüşümlere ve perspektife sahip bir küp.

Bu Kaleme bakın!

Küp şu şekilde yapılır: iki iç içe sarmalayıcıya (biri küp perspektifini vermek ve diğeri tüm kenarları sarmak için) ve yanları yapmak için 6 öğeye dayanır. Her elemana, 3B uzayda (örneğin transform: rotateX(90deg) translateZ(1em)) kendi dönüştürme karıştırma çevirisi ve dönüşü verilir .

Gerçek dünya tasarımının temelini oluşturan bir demo ile bitirelim: perspektif ve dönüşümü kullanan fotoğraflar + başlıklar duvarı.