Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah css3 membuat imej condong?

Bolehkah css3 membuat imej condong?

WBOY
WBOYasal
2022-04-28 16:18:492547semak imbas

CSS3 boleh mencondongkan imej; anda boleh menggunakan atribut transform dengan kaedah skew() untuk mencondongkan imej daripada elemen. Sintaks "elemen gambar" {transform:skew(sudut paksi-x, sudut paksi-y)}".

Bolehkah css3 membuat imej condong?

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Bolehkah CSS3 mencondongkan imej?

CSS3 boleh mencondongkan imej

Anda boleh menggunakan atribut transformasi dan kaedah condong().

Atribut transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

skew bermaksud "skew" dan merupakan fungsi terbina dalam CSS yang perlu digunakan bersama-sama dengan atribut transform untuk transformasi skew elemen. Sintaks

ialah

skew(x-angle,y-angle)

untuk mentakrifkan transformasi kecondongan 2D di sepanjang paksi X dan Y.

Atau:

  • skewX(sudut) mentakrifkan transformasi condong 2D di sepanjang paksi X.

  • skewY(sudut) mentakrifkan transformasi condong 2D di sepanjang paksi Y.

Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
  width:100px;
  height:100px;
  transform:skew(30deg,30deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="Bolehkah css3 membuat imej condong?" >
<img src="1118.02.png" alt="">
</body>
</html>

Hasil output:

Bolehkah css3 membuat imej condong?

(Perkongsian video pembelajaran: tutorial video css)

Atas ialah kandungan terperinci Bolehkah css3 membuat imej condong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Apakah maksud attr dalam jqueryArtikel seterusnya:Apakah maksud attr dalam jquery