2D转换之缩放scale

一、语法

transform:scale(x,y)

二、案例

1、里面写的数字不跟单位，就是倍数的意思，1是1倍，2是2倍

2、修改了宽度为原来的两倍，高度不变

3、只写一个值，代表同时修改宽度和高度，相当于等比例缩放

4、缩小，小于1就是缩放

三、优势

使用scale的优势之处，不会影响其他盒子，而且可以设置缩放中心点。

使用宽高设置大小时，即鼠标经过宽度高度都变成400px，盒子上方的位置不变，像下，向左右开始变化，会影响盒子下方内容的位置。如下图所示：

使用scale放大到原来的2倍的效果，如下图所示：

添加transform-origin: left bottom;设置以左下角为缩放中心点位置