CSS的变形transform样式旋转

使用 CSS3 transform 属性，你可以给任何元素加上“变形。
transform 属性设置属性值 rotate transform: rotate(30deg) 为进行元素2d旋转，其值为deg(度数)rotate(30deg)，或是几圈turn(几圈)rotate(1turn)，可以配合perspective进行景深操作,其相对的3d旋转属性为rotateX与rotateY。

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.sky{
				width: 200px;
				height: 200px;
				color: chartreuse;
				background: skyblue;
				transition: 1s;
			}
			.sky:hover{
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="sky">
		</div>
	</body>
</html>

按照度数旋转
2D顺时针旋转transform: rotate(360deg);
2D逆时针旋转transform: rotate(-360deg);

按照圈数旋转
2D顺时针旋转transform: rotate(1turn);
2D逆时针旋转transform: rotate(-1turn);

3D旋转效果
3D效果 X轴旋转 transform: perspective(800px) rotateX(360deg);
3D效果 Y轴旋转 transform: perspective(800px) rotateY(360deg);

posted @ 2025-01-25 12:46 觉远阅读(33) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS的变形transform样式扭曲

· CSS的变形transform样式平移

· 5.3 CSS3 2D转换

· CSS基础-3D变形

· CSS基础-2D变形

公告

昵称：觉远
园龄： 4年8个月
粉丝： 0
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

前端(26)

觉远的笔记

CSS的变形transform样式旋转

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

前段教程

阅读排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
	.sky{
	width: 200px;
	height: 200px;
	color: chartreuse;
	background: skyblue;
	transition: 1s;
	}
	.sky:hover{
	transform: rotate(360deg);
	}
	</style>
	</head>
	<body>
	<div class="sky">
	</div>
	</body>
	</html>