Gunakan css untuk mencapai efek perspektif

Gunakan css untuk mencapai efek perspektif

Hari ini saya mendapat ide untuk menggunakan css untuk mencapai efek perspektif. Pada awalnya, saya memikirkan metode umum kami untuk menambahkan efek bayangan, yang dicapai dengan menggunakan beberapa div melalui offset, tetapi ini memerlukan banyak div, dan ini tidak ideal. Lalu, saya memikirkan properti CSS: border, yang dapat menghasilkan efek diagonal di persimpangan batas. Hal ini dapat dicapai dengan dua div. Mari kita lihat efek akhirnya terlebih dahulu, lalu menganalisis proses implementasinya.

Pertama, mari kita lihat bagaimana perbatasan menghasilkan efek diagonal. Tambahkan kode berikut ke kepala HTML Anda dan Anda akan melihat efek seperti itu .

.border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}

Dengan landasan di atas, kita dapat menggunakan dua div tambahan untuk mencapai efek perspektif.

1. Kode htmlnya seperti berikut :

2. Kode CSS:

.perspektif-luar{
posisi:relatif;
width:170px;/*Lebar elemen untuk mencapai efek perspektif + jarak perspektif*/
height:140px;/*Ketinggian elemen untuk mencapai efek perspektif + jarak perspektif*/
}
.perspektif-batin{
batas:1 piksel padat #f60;
tinggi:118px;
lebar:148 piksel;
warna latar:#fff;
}
.perspektif-r,
.perspektif-b{
posisi:mutlak;
lebar:0;
tinggi:0;
}
.perspektif-r{
kanan:0;
height:100px;/*Tinggi elemen untuk mencapai efek perspektif (120px) - (border-top:20px)*/
border-left:20px solid #000;/*jarak perspektif kanan*/
border-top:20px solid #fff;/*jarak perspektif di bawah*/
}
.perspektif-b{
bawah:0;
lebar:150px;/*Lebar elemen terluar (170px) - batas kiri*/
perbatasan-kiri:20px solid #fff;
perbatasan-atas:20px padat #000;
}

.perspective-outer mendefinisikan tinggi dan lebar, dan memposisikannya secara relatif untuk memastikan bahwa area perspektif di kanan dan bawah dapat diposisikan pada posisi yang sesuai. Nilai tinggi dan lebar adalah tinggi elemen untuk mencapai perspektif efek ditambah jarak perspektif yang sesuai. .perspective-r hanya perlu mengatur nilai tinggi, dan nilainya adalah tinggi .perspective-outer dikurangi border-top. .perspective-b hanya perlu mengatur nilai lebar, dan nilainya adalah lebar .perspective-. luar dikurangi batas kiri. Nilai lebar border-top dari .perspective-r dan border-left dari .perspective-b menentukan sudut perspektif. Nilai lebar border-left dari .perspective-r dan border-top dari .perspective-b menentukan jarak perspektif. Diantaranya, warna border-top .perspective-r dan border-left .perspective-b adalah warna background elemen induk. Elemen induk halaman pengujian saya di sini adalah body, jadi warnanya putih.

3. Catatan tambahan

Artikel ini hanyalah sebuah tes sederhana, tujuannya adalah untuk menginspirasi orang lain. Kita tidak peduli seberapa praktis cara ini, tapi setidaknya bisa memberi kita cara untuk menyelesaikan masalah. Semoga artikel ini dapat bermanfaat bagi Anda.

Teks asli: http://www.denisdeng.com/?p=474