CSS3实现头像旋转功能

最新推荐文章于 2021-06-27 23:02:43 发布

天南韩立

最新推荐文章于 2021-06-27 23:02:43 发布

阅读量8.1k

点赞数 2

分类专栏： HTML5 CSS3 文章标签：图片旋转 CSS3 动画

本文链接：https://blog.csdn.net/u014175572/article/details/51536271

版权

CSS3 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

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