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

WBOY
Freigeben: 2022-04-28 16:18:49
Original
2536 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!