Perspektif - Trik CSS | CSS Almanac 2025

The perspectiveharta CSS memberikan unsur 3D-ruang dengan memberi kesan jarak antara pesawat Z dan pengguna.

Kekuatan kesan ditentukan oleh nilai. Semakin kecil nilainya, semakin dekat anda dari satah Z dan kesan visualnya semakin hebat. Semakin besar nilainya, semakin halus kesannya.

Penting: Harap maklum bahawa sifat perspektif tidak mempengaruhi bagaimana elemen diberikan; ia hanya membolehkan elemen ruang 3D untuk kanak-kanak. Ini adalah perbezaan utama antara transform: perspective()fungsi dan perspectiveharta benda. Yang pertama memberikan kedalaman elemen sementara yang terakhir mewujudkan ruang 3D yang dikongsi oleh semua anak-anaknya yang berubah.

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

Lihat Pen ini!

Demo di atas bertujuan untuk menunjukkan perbezaan antara fungsi dan harta benda.

Di sebelah kiri, anda dapat melihat harta yang diterapkan pada induk ( perspective: 50em) elemen yang diubah ( transform: rotateY(50deg)).
Di sebelah kanan, perspektif diterapkan dari transformasi secara langsung pada kanak-kanak ( transform: perspective(50em) rotateY(50deg)).

Ini menunjukkan bagaimana perspektif menetapkan ibu bapa menjadikan semua anak berkongsi ruang 3D yang sama dan dengan itu titik hilang yang sama.

Mari cuba sesuatu yang lebih sejuk: sebuah kubus dengan transformasi dan perspektif 3D.

Lihat Pen ini!

Inilah cara kiub dibuat: 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 pencampuran transformasi sendiri yang menerjemahkan dan berputar di ruang 3D (mis transform: rotateX(90deg) translateZ(1em).

Mari kita selesaikan dengan demo yang menampilkan asas reka bentuk dunia nyata: dinding gambar + kapsyen menggunakan perspektif dan transformasi.