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

刷新页面返回顶部

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

相关博文：

· CSS的变形transform样式扭曲

· CSS的变形transform样式旋转

· css样式transform

· 5.3 CSS3 2D转换

· 基于scale的自适应适配方案

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称：觉远
园龄： 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: scale(2);
	}
	</style>
	</head>
	<body>
	<div class="sky">
	</div>
	</body>
	</html>