文章目录
一、使用 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 倍 ;
