Heim > Artikel > Web-Frontend > Welche Eigenschaften in CSS können Rotationseffekte erzielen?
Welche Eigenschaften in CSS können Rotationseffekte erzielen?
- 青灯夜游Original
- 2021-04-06 17:33:215147Durchsuche
Das Attribut, das den Rotationseffekt erzielen kann, ist „transformieren“ und muss zusammen mit Funktionen wie rotieren (), rotieren3d (), rotierenX (), rotierenY () verwendet werden. Das Transformationsattribut wird verwendet, um eine 2D- oder 3D-Transformation auf ein Element anzuwenden, wodurch es gedreht, skaliert, verschoben oder geneigt werden kann.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Das Attribut in CSS, das einen Rotationseffekt erzielen kann, ist „transformieren“. 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. Das
transform-Attribut kann den Attributwert der Drehung realisieren:
rotate(angle) definiert die 2D-Rotation und gibt den Winkel in den Parametern an.
rotate3d(x,y,z,angle) definiert die 3D-Rotation.
rotateX(angle) Definiert eine 3D-Rotation entlang der X-Achse.
rotateY(angle) Definiert die 3D-Rotation entlang der Y-Achse.
rotateZ(angle) Definiert die 3D-Rotation entlang der Z-Achse.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,img,body{
margin: 0;
padding: 0;
}
img.touxiang:hover{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
img.touxiang{
margin: 0 auto;
display: block;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
border-radius:100%;
}
</style>
</head>
<body><br><br><br><br>
<img src="touxiang.jpg" alt=""/>
</body>
</html>Rendering:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWelche Eigenschaften in CSS können Rotationseffekte erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!