Rumah > Artikel > hujung hadapan web > Bolehkah css3 membuat imej condong?
Bolehkah css3 membuat imej condong?
- WBOYasal
- 2022-04-28 16:18:492531semak 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)}".
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:
(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!