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

elemen dengan atribut kelas ditetapkan kepada "kotak" pada dokumen HTML anda:

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

Bentuk segi empat sama yang terhasil akan muncul pada halaman web anda sebagai kiub tidak sekata. Anda boleh bereksperimen dengan kod CSS untuk mencipta variasi berbeza bagi bentuk segi empat sama tidak sekata.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bentuk Persegi Tidak Sekata dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn