CSS3实现头像旋转功能

最新推荐文章于 2024-10-04 08:00:00 发布

lb330776047

最新推荐文章于 2024-10-04 08:00:00 发布

阅读量1.1k

点赞数 1

分类专栏： css 文章标签： css 头像旋转 java 头像旋转头像旋转

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS3中的transform:rotate()可以实现旋转功能，效果如下图所示：

1、鼠标未移动到图片上的样式：

2、鼠标放到该图片上后，会有动画过渡，旋转图片：

代码如下：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title></title>  
         <style type="text/css">  
             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/6.png" />  
     </body>  
 </html>  