CSS3实现头像旋转功能

原创 2016年05月30日 10:53:31

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

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


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


代码如下:

<!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>


其中:

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

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


代码下载地址:http://download.csdn.net/detail/u014175572/9535093

版权声明:本文为博主原创文章,未经博主允许不得转载。

前台按钮跳转到指定框架页(避免target方式)

1

html5屏幕旋转事件

在项目开发中发现,屏幕旋转旋转后html界面出现了不同的显示效果,如果在屏幕旋转后重新加载一次界面的话就会显示的相对来说能接受一点,为此如果能监听到屏幕发生了旋转后进行相关的回调处理,则问题会得到解决...
  • ABC__D
  • ABC__D
  • 2016年04月18日 13:25
  • 4917

CSS3实现头像旋转功能

  • 2016年05月30日 10:55
  • 124KB
  • 下载

CSS3----实现光芒旋转头像动画

CSS: @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transfor...
  • damys
  • damys
  • 2014年05月08日 11:54
  • 1777

CSS3常用功能 旋转等

随着浏览器的升级,CSS3已经可以投入实际应用了。 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题。上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法。...
  • wyodyia
  • wyodyia
  • 2012年11月14日 14:24
  • 580

css3 实现太极旋转

  • 2016年06月27日 17:07
  • 3KB
  • 下载

CSS3图片旋转功能transform:rotate以及Canvas旋转示例

CSS3旋转图片 .demo { width: 100px; height: 75px; backgr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3实现头像旋转功能
举报原因:
原因补充:

(最多只允许输入30个字)