Bagaimanakah saya boleh mencipta bentuk Trapezoid menggunakan Perspektif Transformasi CSS?

Melukis Trapezium dengan CSS3

Mencipta trapezoid dengan CSS3 memerlukan beberapa teknik yang bijak. Walaupun cadangan menggunakan transformasi 3D CSS3, kami meneroka kaedah moden menggunakan CSS Transform Perspective.

CSS Transform Perspective

Sifat CSS Transform Perspective memperkenalkan ruang 3D untuk elemen, membolehkan mereka berputar di sekitar perspektif tertentu. Dengan menggunakan nilai perspektif pada elemen dan kemudian memutarkannya di sepanjang salah satu paksi (X, Y atau Z), kita boleh mencipta ilusi trapezoid.

Contoh

Pertimbangkan kod CSS berikut:

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

HTML:

<div class="trapezoid"></div>

Dalam contoh ini, elemen dengan kelas .trapezoid dikonfigurasikan dengan lebar dan ketinggian 200 piksel, latar belakang merah dan transformasi yang menggunakan perspektif 10 piksel dan putaran 1 darjah di sepanjang paksi X.

Elemen yang terhasil akan muncul sebagai trapezoid dengan bahagian atas dan bawah yang condong sedikit. Kesannya menjadi lebih ketara apabila nilai perspektif meningkat.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta bentuk Trapezoid menggunakan Perspektif Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!