【CSS3】CSS3 2D 转换 - scale 缩放 ① ( 使用 scale 设置缩放 | 使用 scale 设置缩放与直接设置盒子模型大小对比 )

作者：System 时间：2024年08月19日分类：所有,css3 字数：659

在CSS3中，我们可以使用transform属性的scale函数来对元素进行缩放。scale函数接受一个或两个参数，当只有一个参数时，它将对元素进行等比例缩放。两个参数时，第一个参数表示水平方向的缩放比例，第二个参数表示垂直方向的缩放比例。

解法1：使用 scale 设置一个参数，实现元素的等比例缩放。

HTML代码：




<div class="box1"></div>

CSS代码：




.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(0.5);  /* 水平和垂直方向等比例缩放0.5倍 */
}

解法2：使用 scale 设置两个参数，实现元素的不等比例缩放。

HTML代码：




<div class="box2"></div>

CSS代码：




.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: scale(0.5, 2);  /* 水平方向缩放0.5倍，垂直方向缩放2倍 */
}

以上两种方法，第一种方法实现了元素在水平和垂直方向的等比例缩放，第二种方法实现了元素在水平方向和垂直方向的不等比例缩放。