CSS的变形中心点样式

transform-origin 用于设置动画的基点(中心点)，适用于所有块级元素及某些内联元素。
该样式须配合 transform 使用，默认情况下，元素的动作参考点为元素盒子的中心，其可以使用英文或相对位置设定中心点。

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

transform-origin的值可以是文字 left right top bottom center
transform-origin的值可以是像素 30px 30px
transform-origin的值可以是可以是百分比 50% 50%

posted @ 2025-01-27 08:00  觉远  阅读(59)  评论(0)    收藏  举报