Bagaimana untuk Mencipta Trapezoid dengan Transformasi 3D CSS3?

Melukis Trapezoid dengan CSS3

"trapezium" yang disebut dalam soalan pada dasarnya merujuk kepada bentuk trapezoid. Melukis bentuk sedemikian dalam CSS3 telah menjadi pertanyaan biasa, terutamanya untuk mereka bentuk elemen tapak web seperti bar alat dan menu.

Satu pendekatan untuk mencipta trapezoid melibatkan penggunaan sifat transformasi 3D CSS3. Begini cara anda boleh mencapainya:

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

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

Kaedah ini menggunakan perspektif 3D pada elemen, mewujudkan ilusi bentuk trapezoid yang condong. Dengan melaraskan nilai untuk perspektif dan rotateX, anda boleh mengawal sudut dan kedalaman herotan, menghasilkan pelbagai bentuk trapezium.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Trapezoid dengan Transformasi 3D CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!