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  觉远  阅读(167)  评论(0)    收藏  举报