CSS的变形transform样式缩放

使用 CSS3 transform 属性，你可以给任何元素加上“变形”
transform 属性设置属性值 scale 为进行2d缩放，也可以单独定义scaleX与scaleY，其属性值为缩放倍数。

<!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: scale(2);
			}
		</style>
	</head>
	<body>
		<div class="sky">
		</div>
	</body>
</html>

其中scale函数可以设置一个值 也可以设置两个值
一个值是x轴和y轴一起缩小放大多少倍
两个值是第一个值是x轴缩小放大多少倍的值，第二个值是y轴缩小和放大多少倍

.sky:hover{
				transform: scale(2,3);
			}

也可以分别设置x轴和y轴

.sky:hover{
				transform: scaleX(2) scaleY(3);
			}
posted @ 2025-01-25 15:07  觉远  阅读(41)  评论(0)    收藏  举报