Kann CSS3 dazu führen, dass Bilder geneigt werden?-Front-End-Fragen und Antworten-php.cn

Kann CSS3 dazu führen, dass Bilder geneigt werden?

WBOY

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

Original

2554 Leute haben es durchsucht

css3 kann das Bild neigen; Sie können das Transformationsattribut mit der skew()-Methode verwenden, um das Bild zu neigen. Die skew()-Methode wird verwendet, um die Skew-Transformation des Elements festzulegen . Die Syntax lautet „Bildelement {transform:skew (x-Achsen-Winkel, y-Achsen-Winkel)}“.

Kann CSS3 dazu führen, dass Bilder geneigt werden?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Kann CSS3 das Bild neigen?

CSS3 kann das Bild neigen

Verwenden Sie einfach das Transformationsattribut und die skew()-Methode. Das Attribut

transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

skew bedeutet „skew“ und ist eine in CSS integrierte Funktion, die zusammen mit dem Transformationsattribut für die Skew-Transformation von Elementen verwendet werden muss.

Die Syntax lautet

skew(x-angle,y-angle)

Nach dem Login kopieren

definiert eine 2D-Neigungstransformation entlang der X- und Y-Achse.

Oder:

skewX(angle) definiert eine 2D-Skew-Transformation entlang der X-Achse.
skewY(angle) definiert die 2D-Skew-Transformation entlang der Y-Achse.

Das Beispiel sieht wie folgt aus:

<!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="Kann CSS3 dazu führen, dass Bilder geneigt werden?" >
<img src="1118.02.png" alt="">
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Kann CSS3 dazu führen, dass Bilder geneigt werden?

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonKann CSS3 dazu führen, dass Bilder geneigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!