Cara Mencapai Skew dengan Transform CSS: Memusing Kedua-dua Pihak

Mencapai Skew dengan CSS Transform: Skewing both sides

Imej yang disediakan mempamerkan kesan senget menarik yang menyudut kedua-dua penjuru elemen. Untuk mencipta semula kesan ini menggunakan transformasi CSS, ikuti langkah berikut:

Menggunakan Perspektif Skew:

Untuk menambah perspektif, gunakan sifat CSS berikut:

transform: perspective(distance) rotateY(angle);

Ganti "jarak" dengan nilai untuk menetapkan jarak perspektif (nilai yang lebih tinggi mewujudkan perspektif yang lebih jauh). Gantikan "sudut" dengan sudut putaran yang diingini (45 darjah dalam kes ini).

Contoh CSS:

.red-box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

Kod HTML:

Untuk menggunakan pencongan pada elemen, tambahkan kelas berikut:

<div class="red-box"></div>

Contoh daripada Sumber Luaran:

CSS dan HTML yang disediakan kod diperoleh daripada http://desandro.github.com/3dtransforms/docs/perspective.html. Laman web ini menawarkan contoh dan dokumentasi lanjut tentang menggunakan transformasi perspektif.

Atas ialah kandungan terperinci Cara Mencapai Skew dengan Transform CSS: Memusing Kedua-dua Pihak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!