Bolehkah css3 membuat imej condong?-Soal Jawab bahagian hadapan-php.cn

Bolehkah css3 membuat imej condong?

WBOY

Lepaskan： 2022-04-28 16:18:49

asal

2536 orang telah melayarinya

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)

Salin selepas log masuk

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>

Salin selepas log masuk

Hasil output:

Bolehkah css3 membuat imej condong?