Home >Web Front-end >CSS Tutorial >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

WBOY
WBOYOriginal
2021-11-12 14:24:145489browse

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);}" .

How to make the mouse slide over the image to rotate in css

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.

How to make the mouse slide over the image to rotate in css

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:

How to make the mouse slide over the image to rotate in css

When the mouse slides over, rotation will occur:

How to make the mouse slide over the image to rotate in css

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn