Home > Article > Web Front-end > How to make the mouse slide over the image to rotate in css
How to make the mouse slide over the image to rotate in css
- WBOYOriginal
- 2021-11-12 14:24:145390browse
In CSS, you can use the ":hover" pseudo-class selector and transform attribute to achieve the effect of rotating the image when the mouse slides over it. The syntax is "picture element:hover{transform:rotateZ (rotation angle);}" .
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to rotate the image with the mouse in css
In css, you can rotate the div element through the transform attribute. The transform attribute applies 2D or 2D to the element. 3D conversion. This property allows us to rotate, scale, move or tilt the element.
The numbers in the table indicate the first browser version that fully supports this attribute.
A number with -webkit-, -moz- or -ms- indicates the first version using the prefix.
Let’s take an example to see how the mouse slides over and the picture rotates. The example is as follows:
<html>
<head>
<style>
body {
background:#ddd;
}
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("1013.01.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>In the above example, the chrome browser is used, so use with the -webkit- prefix.
Output result:
When the mouse slides over, rotation will occur:
Update For more programming related knowledge, please visit: programming video! !
The above is the detailed content of How to make the mouse slide over the image to rotate in css. For more information, please follow other related articles on the PHP Chinese website!