css 图片/元素旋转代码

最新推荐文章于 2024-07-27 23:01:21 发布

木偶跳舞

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量4.4k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u013372487/article/details/49280853

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代码示例：

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
@keyframes wml {
	from {
	transform:rotate(0);
	-ms-transform:rotate(0);
	-webkit-transform:rotate(0);
	-o-transform:rotate(0);
	-moz-transform:rotate(0)
}
to {
	transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-moz-transform:rotate(360deg)
}
}.asd {
	animation:wml 3s linear infinite;
	-moz-animation:wml 3s linear infinite;
	-webkit-animation:wml 3s linear infinite;
	-o-animation:wml 3s linear infinite
}
</style>
</head>
<body>
	<img class="asd" src="http://avatar.csdn.net/5/5/7/1_u013372487.jpg">
</body>
</html>
</span>

from 0 to 360 表示顺时针旋转

from 360 to 0 表示逆时针旋转

3s 表示旋转速度