CSS旋转，移动

最新推荐文章于 2025-07-07 10:12:19 发布

蔡定努

最新推荐文章于 2025-07-07 10:12:19 发布

阅读量909

点赞数

CC 4.0 BY-SA版权

分类专栏： # css 文章标签： css

本文链接：https://blog.youkuaiyun.com/caidingnu/article/details/88792571

css 专栏收录该内容

5 篇文章

订阅专栏

2D旋转---------------------

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				border: 20px groove #009E94;
				position: relative;
				border-radius:50% ;
				
				/* 动画名称 */
				animation-name: name,rotate;   
				/* 动画持续时间 */
				animation-duration: 2s,2s;
				/* 动画循环次数  infinite无限 */
				animation-iteration-count: infinite;
				/* 动画是否反向运动 normal顺时针  reverse逆时针 alternate-reverse（正反循环 */
				animation-direction: reverse;
			}
			@keyframes rotate {
				from {
					transform: rotate(0deg)
				}

				to {
					transform: rotate(360deg)
				}
			}
			@keyframes name{
				from{
					left: 0px;
				}
				to{
					left: 200px;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

3D旋转==================================

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				border: 20px groove #009E94;
				position: relative;
				border-radius: 50%;
				animation: rotateimg 1s linear infinite;
			}

			@keyframes rotateimg {
				from {
					transform: rotateY(0deg);
				}
				to {
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

移动---------------------------------

@keyframes rotate-img {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(120px);
    }
}
/* reverse 反向*/
<div class="" style="width: 100px;height: 100px;border: 1px solid red;
animation: rotate-img linear 1s infinite reverse;">
	22
</div>