浅谈transform

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放

---

缩放：scale:

缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。

1.语法：
transform:scale(x,y);
2.总结：
宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小
示例代码：

    <style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.2s;
            /* 可以设置缩放的中心点 */
            transform-origin: left bottom;
        }
        
        div:hover {
     
            /* 里面数字不跟单位，就是倍数的意思1就是1倍，2就是2倍 ，0.5就是0.5倍*/
            /* transform: scale(2, 0.5); */
            /* scale的优势，不会影响其他盒子且默认以中心点缩放的 */
            transform: scale(2, 2);
        }
    <