Bagaimana untuk Memusingkan Kedua-dua Penjuru Elemen Menggunakan Transformasi CSS?

Mencipta Kesan Serong dengan Transformasi CSS

Dalam bidang reka bentuk web, transformasi CSS menawarkan alat yang berkuasa untuk memanipulasi elemen dalam ruang. Salah satu kesan menarik yang boleh anda capai ialah condong, memberikan elemen penampilan yang condong atau herot.

Mencapai Corner Skew dengan CSS Transforms

Timbul persoalan: bagaimanakah anda mencipta kesan senget seperti contoh yang diberikan, di mana kedua-dua sudut dicondongkan?

Jawapan:

Untuk mencapai kesan ini, anda boleh menggunakan sifat transformasi bersama-sama dengan perspektif dan putarY. Berikut ialah contoh:

<code class="css">.red.box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}</code>

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

Penjelasan:

• perspektif: Mentakrifkan titik lenyap untuk transformasi, mencipta kesan 3D. Nilai yang lebih tinggi mensimulasikan jarak yang lebih besar.
• putarY: Memutar elemen sepanjang paksi-Y, memberikannya rupa senget. Nilai positif berputar mengikut arah jam dan sebaliknya.

Dengan menggabungkan sifat ini, anda boleh mencipta kesan senget yang mengubah kedua-dua penjuru elemen, seperti yang ditunjukkan dalam imej contoh.

Atas ialah kandungan terperinci Bagaimana untuk Memusingkan Kedua-dua Penjuru Elemen Menggunakan Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!