Perspektif - Trik CSS | CSS Almanak 2024

The perspectiveproperti CSS memberikan elemen 3D-ruang dengan mempengaruhi jarak antara Z pesawat dan pengguna.

Kekuatan efek ditentukan oleh nilainya. Semakin kecil nilainya, semakin dekat Anda dari bidang Z dan semakin mengesankan efek visualnya. Semakin besar nilainya, semakin halus efeknya.

Penting: Harap dicatat bahwa properti perspektif tidak mempengaruhi bagaimana elemen tersebut dirender; ini hanya memungkinkan elemen ruang 3D untuk anak-anak. Inilah perbedaan utama antara transform: perspective()fungsi dan perspectiveproperti. Yang pertama memberikan kedalaman elemen sementara yang berikutnya membuat ruang 3D yang dibagikan oleh semua turunannya yang telah diubah.

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

Lihat Pena ini!

Demo di atas bertujuan untuk menunjukkan perbedaan antara fungsi dan properti.

Di sisi kiri, Anda bisa melihat properti yang diterapkan ke induk ( perspective: 50em) dari elemen yang diubah ( transform: rotateY(50deg)).
Di sisi kanan, perspektif diterapkan dari transformasi langsung pada anak ( transform: perspective(50em) rotateY(50deg)).

Ini menunjukkan bagaimana pengaturan perspektif pada orang tua membuat semua anak berbagi ruang 3D yang sama dan dengan demikian titik hilang yang sama.

Mari kita coba sesuatu yang lebih keren: kubus dengan transformasi 3D dan perspektif.

Lihat Pena ini!

Berikut adalah cara membuat kubus: ia bergantung pada dua pembungkus bersarang (satu untuk memberikan perspektif kubus dan satu untuk membungkus semua sisi) dan 6 elemen untuk membuat sisi. Setiap elemen diberi transformasi pencampurannya sendiri yang menerjemahkan dan berputar dalam ruang 3D (misalnya transform: rotateX(90deg) translateZ(1em)).

Mari selesaikan dengan demo yang menampilkan apa yang bisa menjadi dasar desain dunia nyata: dinding foto + keterangan menggunakan perspektif dan transformasi.