Bagaimana untuk Memusingkan Hanya Satu Sisi Elemen dengan Transformasi CSS3?

Css3 Transform Skew Only One Side

CSS transforms ialah alat berkuasa yang boleh digunakan untuk memanipulasi penampilan elemen pada halaman web. Salah satu penjelmaan yang paling serba boleh ialah penjelmaan senget, yang boleh digunakan untuk mencondongkan elemen pada sudut tertentu.

Walau bagaimanapun, secara lalai, penjelmaan senget mempengaruhi kedua-dua belah elemen secara sama rata. Ini boleh mengehadkan dalam sesetengah kes, seperti apabila anda ingin menyerong hanya satu sisi elemen, seperti imej latar belakang.

Nasib baik, terdapat cara untuk menyerong hanya satu sisi elemen menggunakan CSS . Dengan menggunakan div bersarang untuk elemen yang anda ingin condong, anda boleh menggunakan transformasi condong pada div induk dan kemudian menggunakan transformasi condong yang bertentangan pada div anak. Ini akan memesongkan hanya satu sisi elemen secara berkesan.

Berikut ialah contoh cara untuk menyerong hanya satu sisi elemen:

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

CSS ini akan mencipta div dengan merah latar belakang dan lebar dan tinggi masing-masing 150px dan 100px. Div akan condong pada sudut 20 darjah ke kanan dan akan mengandungi imej. Imej akan diskew dengan menggunakan penjelmaan senget bertentangan (-20deg) padanya.

Atas ialah kandungan terperinci Bagaimana untuk Memusingkan Hanya Satu Sisi Elemen dengan Transformasi CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!