一、使用 scale 设置缩放
在 CSS3 中的 2D 转换 中 , 可以使用 scale 样式 , 设置 盒子模型 的缩放属性 , 可以设置 放大 和 缩小 ;
scale 样式语法 :
transform...:scale(1,1); 样式 , 表示 盒子模型 宽高 都放大了一倍 , 也就是不变 ;
设置 transform:scale(2,2); 样式 , 表示 盒子模型 宽高 都放大了 2 倍 ;
设置...如 : 设置 transform:scale(2,0.5); 样式 , 表示 盒子模型 宽度放大到原来的 2 倍 , 高度缩小到原来的 0.5 倍 ;
二、使用 scale 设置缩放 与 直接设置盒子模型大小...对比
使用 transform:scale 可以设置 盒子模型 的 缩放倍数 ;
直接修改 盒子模型 大小 , 也可以实现上述相同的功能 ;
直接 修改 盒子模型 大小 ,
无法设置 缩放的 中心位置..., 盒子模型 只能向 左右 和 下方延伸 , 不能向上方延伸 ;
会影响页面的 整体布局 , 影响 其它盒子模型 布局 ; 如 : 该盒子模型变大 , 那么下面的盒子就会被挤下去 ;
使用 transform