Home >Web Front-end >CSS Tutorial >Example code for implementing avatar rotation effect using CSS3
Example code for implementing avatar rotation effect using CSS3
- 高洛峰Original
- 2017-03-15 09:07:011625browse
This article mainly introduces the effect of avatar rotation using CSS3. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.
The effect of not placing the mouse:
The rotation effect after the mouse is placed:
transition: all 2.0s; indicates all attributes The transformation is completed within 2 seconds;
transform: rotate(360deg); means picture is rotated 360 degrees.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
border: #000 solid 2px;
display: block;
margin: 50px auto;
border-radius: 50%;
transition: all 2.0s;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="img/03.jpg" / alt="Example code for implementing avatar rotation effect using CSS3" >
</body>
</html>
The above is the detailed content of Example code for implementing avatar rotation effect using CSS3. For more information, please follow other related articles on the PHP Chinese website!