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

我不是女神ヾ 2023-10-14 14:24 16阅读 0赞

#### 文章目录 ####

*  一、使用 scale 设置缩放
 *  二、使用 scale 设置缩放 与 直接设置盒子模型大小 对比
 *  三、代码示例
 *   *  1、代码示例 - 设置两个参数代表宽高缩放
     *  2、代码示例 - 设置 1 个参数代表宽高缩放

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

**执行结果 :**

*  **初始状态 :**  
    ![在这里插入图片描述][258a456c00b8482593f137d9db0a74e8.png]
 *  **鼠标移动到盒子模型上之后 :** 宽度变为原来的 2 倍 , 高度变为原来的 0.5 倍 ;

![在这里插入图片描述][915dc26596354934848287ce840db8dd.png]

### 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>

**执行结果 :**

*  **初始状态 :**

![在这里插入图片描述][258a456c00b8482593f137d9db0a74e8.png]

*  **鼠标移动到盒子模型上之后 :** 宽高都变为原来的 2 倍 ;

![在这里插入图片描述][7a22158de7d24e119bcb0ad23378f1c4.png]

[258a456c00b8482593f137d9db0a74e8.png]: https://img-blog.csdnimg.cn/258a456c00b8482593f137d9db0a74e8.png
[915dc26596354934848287ce840db8dd.png]: https://img-blog.csdnimg.cn/915dc26596354934848287ce840db8dd.png
[7a22158de7d24e119bcb0ad23378f1c4.png]: https://img-blog.csdnimg.cn/7a22158de7d24e119bcb0ad23378f1c4.png