一、使用 scale 设置缩放

在 CSS3 中的 2D 转换中 , 可以使用 scale 样式 , 设置盒子模型的缩放属性 , 可以设置放大和缩小 ;

scale 样式语法 :

transform:scale(x,y);

scale() 中的 x 和 y 使用逗号隔开 ;
x 和 y 的值是小数类型 , 取值范围大于 0 ;

借助以下样式理解 scale 语法 :

设置 transform:scale(1,1); 样式 , 表示盒子模型宽高都放大了一倍 , 也就是不变 ;
设置 transform:scale(2,2); 样式 , 表示盒子模型宽高都放大了 2 倍 ;
设置 transform:scale(0.5,0.5); 样式 , 表示盒子模型宽高都缩小到 0.5 倍 ;

如果 scale 只设置一个参数 , 那么就是同时对宽高缩放相同的倍数 , 如 : 设置 transform:scale(2); 样式 , 表示盒子模型宽高都放大了 2 倍 , 相当于 transform:scale(2,2); 样式 ;

可以为宽度和高度设置不同的倍数 , 如 : 设置 transform:scale(2,0.5); 样式 , 表示盒子模型宽度放大到原来的 2 倍 , 高度缩小到原来的 0.5 倍 ;

二、使用 scale 设置缩放与直接设置盒子模型大小对比

使用 transform:scale 可以设置盒子模型的缩放倍数 ;

直接修改盒子模型大小 , 也可以实现上述相同的功能 ;

直接修改盒子模型大小 ,

无法设置缩放的中心位置 , 盒子模型只能向左右和下方延伸 , 不能向上方延伸 ;
会影响页面的整体布局 , 影响其它盒子模型布局 ; 如 : 该盒子模型变大 , 那么下面的盒子就会被挤下去 ;

使用 transform:scale 设置缩放 ,

可以任意设置缩放的方向 ,
不会影响其它盒子模型的布局 ;

三、代码示例

1、代码示例 - 设置两个参数代表宽高缩放

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3 2D 转换 - rotate 旋转</title><style>div {width: 200px;height: 200px;/* 上下 100 像素外边距, 居中对齐 */margin: 100px auto;/* 设置背景颜色 */background-color: pink;/* 设置以左下角为中心旋转 */transform-origin: 50% 50%;/* 设置过渡动画 */transition: all 1s;}/* 设置 鼠标 移动到 div::before 伪元素 上的效果 */div:hover {/* 鼠标移动上去后  */transform: scale(2, 0.5);}</style>
</head><body><div></div>
</body></html>

执行结果 :

初始状态 :
鼠标移动到盒子模型上之后 : 宽度变为原来的 2 倍 , 高度变为原来的 0.5 倍 ;

在这里插入图片描述

2、代码示例 - 设置 1 个参数代表宽高缩放

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3 2D 转换 - rotate 旋转</title><style>div {width: 200px;height: 200px;/* 上下 100 像素外边距, 居中对齐 */margin: 100px auto;/* 设置背景颜色 */background-color: pink;/* 设置以左下角为中心旋转 */transform-origin: 50% 50%;/* 设置过渡动画 */transition: all 1s;}/* 设置 鼠标 移动到 div::before 伪元素 上的效果 */div:hover {/* 鼠标移动上去后  */transform: scale(2);}</style>
</head><body><div></div>
</body></html>