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

韩曙亮

发布于 2023-10-11 12:21:56

2.4K03

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：3

代码可运行

一、使用 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>