Heim > Artikel > Web-Frontend > So erzielen Sie einen Rotationseffekt gegen den Uhrzeigersinn bei Mauszeigerelementen in CSS
So erzielen Sie einen Rotationseffekt gegen den Uhrzeigersinn bei Mauszeigerelementen in CSS
- WBOYOriginal
- 2021-11-30 18:30:594274Durchsuche
In CSS können Sie den Pseudoklassenselektor und das Transformationsattribut „:hover“ verwenden, um den Rotationseffekt gegen den Uhrzeigersinn von mit der Maus bewegten Elementen zu erzielen. Die Syntax lautet „element:hover{transform:rotateZ (Rotationswinkel);}“. .
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie den Effekt der Drehung gegen den Uhrzeigersinn von mit der Maus darüber schwebenden Elementen in CSS
In CSS können Sie den Pseudoklassenselektor und das Transformationsattribut „:hover“ verwenden, um den Effekt der Drehung der Maus über Elemente gegen den Uhrzeigersinn zu erzielen das Bild. Die Transformationseigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
Schauen wir uns ein Beispiel an. Das Beispiel sieht wie folgt aus:
<html>
<head>
<style>
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("1118.02.png") left top;
-webkit-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
}
.keleyi:hover {
-webkit-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
}
</style>
</head>
<body>
<div class="keleyi"></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Rotationseffekt gegen den Uhrzeigersinn bei Mauszeigerelementen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!