Bagaimana untuk Mencipta Bentuk Persegi Tidak Sekata dengan Transformasi CSS?

Mencipta Bentuk Segi Empat Tidak Sekata dalam CSS

Untuk mencipta bentuk segi empat tidak sekata yang digambarkan dalam imej, kita boleh menggunakan gabungan putaran dan perspektif berubah dalam CSS. Teknik ini membolehkan kami mencipta kesan seperti 3D tanpa menggunakan perisian pemodelan 3D yang kompleks.

Kod CSS:

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

Penanda HTML:

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

Penjelasan:

• Perspektif: Sifat ini mencipta ilusi kedalaman dengan menggunakan perspektif pada elemen. Nilai ditetapkan kepada 180px.
• Transformasi Putaran: Kami menggunakan tiga perubahan putaran di sepanjang paksi-x (15deg), paksi-y (20deg), dan paksi-z (-3deg). ). Putaran ini secara kolektif mencondongkan segi empat sama dan memberikannya bentuk tidak sekata.

Dengan menggabungkan transformasi ini, kita boleh mencipta bentuk segi empat tidak sekata yang diingini seperti yang dilihat dalam imej.

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