[CSS3] CSS3实现头像旋转功能

[复制链接]
CSS3中的transform:rotate()可以实现旋转功能,效果如下图所示:
1、鼠标未移动到图片上的样式:
20160530105023349.png
2、鼠标放到该图片上后,会有动画过渡,旋转图片:
20160530105108788.png
代码如下:
  1.     <!DOCTYPE html>  
  2.     <html>  
  3.         <head>  
  4.             <meta charset="UTF-8">  
  5.             <title></title>  
  6.             <style type="text/css">  
  7.                 img{  
  8.                     border: #000 solid 2px;  
  9.                     display: block;  
  10.                     margin: 50px auto;  
  11.                     border-radius: 50%;  
  12.                     transition: all 2.0s;  
  13.                 }  
  14.                 img:hover{  
  15.                     transform: rotate(360deg);  
  16.                 }  
  17.             </style>  
  18.         </head>  
  19.         <body>  
  20.             <img src="img/6.png" />  
  21.         </body>  
  22.     </html>  
复制代码


其中:
transition: all 2.0s;表示所有的属性变换在2秒内完成;

transform: rotate(360deg);表示图片旋转360度。

回复

使用道具 举报

Copyright   ©2015-2016  大糖网  ( 浙ICP备17038000号-1 )

大糖网是站长们一起交流成长的平台,这里可以找到海量、优质精品的源码模板等建站资源