In CSS, you can use the ":hover" pseudo-class selector and transform attribute to achieve the counterclockwise rotation effect of mouse-hovered elements. The syntax is "element:hover{transform:rotateZ (rotation angle);}" .
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to achieve the counterclockwise rotation effect of mouse hover elements in css
You can use the ":hover" pseudo-class selector and transform in css The attribute achieves the effect of counterclockwise rotation when the mouse is rolled over the image. The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
Let’s take a look at an example. The example is as follows:
<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>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve counterclockwise rotation effect on mouse hover elements in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
