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

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

2024-05-24 08:05:35 前端知识 前端哥 572 107 我要收藏

文章目录

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

执行结果 :

  • 初始状态 :
    在这里插入图片描述
  • 鼠标移动到盒子模型上之后 : 宽度变为原来的 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>

执行结果 :

  • 初始状态 :

在这里插入图片描述

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

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9226.html
标签
评论
发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么?如何使用?

2024-03-12 01:03:24

js延迟加载的六种方式

2024-05-30 10:05:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!