2D转换之缩放

语法：transform:scale(X,Y)

注意：

1.X是宽，Y是高

2.数值不带单位且数值一般只填一个，实现等比例缩放

3.数值小于1代表缩小

4.数值可以为负值，负值比-1小为放大例如-2，-3等等。负值大于-1则为缩小，例如-0.5，-0.4等等

优点：

不会影响其他盒子布局，可以设置缩放中心点

玩法示例：

<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            overflow: hidden;
            background-color: pink;
        }
        img{
            width: 100%;
            height: 100%;
            transition: all 1s;
        }
        .box:hover img{
            transform: scale(1.2);
        }
    </style>

介绍：在盒子里面加入图片，使图片和盒子一样大小，加入：hover 鼠标经过让图片放大，搭配过渡，让放大看的比较自然，在父盒子加入溢出隐藏，让图片溢出不会显示出来。