So drehen Sie Bilder mit CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Anschließend verwenden Sie das Transformationsattribut von CSS3, um das Element zu drehen, zu skalieren, zu verschieben oder zu neigen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wie drehe ich Bilder mit CSS?
Um den Bildrotationseffekt in CSS festzulegen, können Sie das Transformationsattribut von CSS3 verwenden. Das Transformationsattribut wendet eine 2D- oder 3D-Transformation auf das Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
transform-Attribut:
Verwendungssyntax:
transform: none|transform-functions;
Internet Explorer 10, Firefox und Opera unterstützen das Transformationsattribut.
Internet Explorer 9 unterstützt das alternative Attribut -ms-transform (nur für 2D-Transformationen).
Safari und Chrome unterstützen alternative -webkit-transform-Eigenschaften (3D- und 2D-Transformationen).
Opera unterstützt nur die 2D-Konvertierung.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:300px;
background-image:url(img/3.jpg);
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
[Empfohlenes Lernen: css-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonSo drehen Sie Bilder mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
