Bagaimana untuk Mencipta Bentuk Persegi Tidak Sekata dengan CSS?-tutorial css-php.cn

Bagaimana untuk Mencipta Bentuk Persegi Tidak Sekata dengan CSS?

Patricia Arquette

Lepaskan： 2024-11-01 09:07:02

asal

498 orang telah melayarinya

How to Create an Irregular Square Shape with 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!