Bagaimana untuk Mencipta Bentuk Persegi Tidak Sekata Menggunakan Transformasi CSS?

Mencipta Bentuk Segi Empat Tidak Sekata dengan CSS

Untuk mencapai bentuk unik yang digambarkan dalam imej yang disediakan menggunakan CSS, gabungan putaran dan transformasi perspektif bekerja. Coretan kod berikut menunjukkan cara:

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

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

Penjelasan:

• perspektif(180px): Mencipta perspektif 3D, memberikan ilusi kedalaman.
• putarX(15deg): Putar kotak 15 darjah mengelilingi paksi-X.
• putarY(20deg): Putar kotak 20 darjah mengelilingi paksi-Y.
• putar Z(-3deg): Memusingkan kotak lawan jam 3 darjah mengelilingi paksi-Z.

Dengan menggabungkan penjelmaan ini, bentuk segi empat sama diherotkan dan dicondongkan, menghasilkan bentuk tidak sekata yang ditunjukkan dalam imej rujukan.

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