Bagaimanakah Saya Boleh Membuat Petak Tidak Sekata dengan CSS?

Membuat Bentuk Petak Tidak Sekata dengan CSS

Membayangkan segi empat sama yang bertentangan dengan simetri konvensional? CSS menyediakan alatan untuk mencipta bentuk yang tidak sekata seperti yang dipamerkan dalam imej.

Rahsianya terletak pada penggunaan bijak sifat transformasi, terutamanya perspektif, rotateX, rotateY dan rotateZ. Sifat ini membolehkan anda memanipulasi orientasi 3D bentuk, mencipta ilusi sudut dan kedalaman yang tidak sekata.

Dalam contoh yang disediakan, kod CSS mencapai transformasi ini:

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

• Perspektif: Mewujudkan titik lenyap, mencipta ilusi kedalaman.
• RotateX: Condongkan bentuk sepanjang paksi-x (mendatar).
• RotateY: Putar bentuk sepanjang paksi-y (menegak).
• RotateZ: Putar bentuk sepanjang paksi-z (berserenjang dengan halaman).

Dengan bereksperimen dengan nilai ini, anda boleh mencapai pelbagai bentuk segi empat sama tidak sekata, menambahkan sentuhan unik pada reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Petak Tidak Sekata dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!