Bagaimana untuk Memusingkan Kedua-dua Penjuru Elemen Menggunakan Transformasi CSS?

Memusing Kedua-dua Penjuru Menggunakan Transformasi CSS

Soalan:

Bagaimanakah sifat transformasi CSS boleh digunakan untuk mencapai kesan condong digambarkan dalam gambar berikut? Matlamatnya ialah untuk menyerong kedua-dua sudut atas dan bawah.

[Sisipkan Imej: https://i.sstatic.net/KNLE4.jpg]

Jawapan:

Untuk mencapai kesan condong yang diingini, gunakan transformasi CSS berikut:

transform: perspective( 600px ) rotateY( 45deg );

Gunakan transformasi ini pada elemen HTML dengan kelas tertentu, seperti:

.red.box {
  background-color: red;
  transform: perspective( 600px ) rotateY( 45deg );
}

Kemudian, cipta elemen HTML dengan kelas yang sepadan untuk menghasilkan bentuk senget:

<div class="box red"></div>

Atas ialah kandungan terperinci Bagaimana untuk Memusingkan Kedua-dua Penjuru Elemen Menggunakan Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!