Bagaimana untuk Mencipta Bentuk Persegi Tidak Sekata dengan CSS?

Penciptaan Bentuk Segi Empat Tidak Sekata dalam CSS

Mencipta bentuk tidak sekata dalam CSS boleh menjadi tugas yang mencabar, tetapi ia tidak mustahil. Dengan gabungan perubahan CSS yang betul, anda boleh mencipta reka bentuk yang unik dan menarik perhatian. Dalam artikel ini, kami akan menunjukkan kepada anda cara mencipta bentuk segi empat sama tidak sekata menggunakan CSS.

Masalah:

Bagaimanakah saya boleh mencipta bentuk segi empat tidak sekata ini menggunakan CSS?

[Imej Bentuk Segi Empat Tidak Sekata]

Penyelesaian:

Untuk mencipta bentuk segi empat sama tidak sekata, anda boleh menggunakan kod CSS berikut:

<code class="css">.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}</code>

Harta perspektif mencipta ruang 3D di mana transformasi digunakan. Sifat rotateX, rotateY dan rotateZ masing-masing memutar elemen di sekeliling paksi x, y dan z.

Menggunakan transformasi ini , anda boleh membuat bentuk segi empat sama tidak sekata yang kelihatan condong dan diputar. Anda boleh melaraskan nilai sifat rotateX, rotateY dan rotateZ untuk mencipta orientasi dan sudut yang berbeza.

Struktur HTML :

Untuk menggunakan kod ini, cuma tambah

<code class="html"><div class="box">
</div></code>