记一次transform:scale()踩坑

项目场景：

提示：这里简述项目相关背景：

设计一个功能样式，要求鼠标浮动上去的时候，图标放大

---

问题描述

给父级盒子设置了样式。
transform属性要求使用元素是个盒模型，的设置成block、inline-block或display:flex。否则直接在该元素上设置属性，属性值不生效。

 <div class="widgets">
        <div class="nowtime">
          <span>{{ nowTime }}</span>
        </div>
        <div class="fullscreen">
          <i class="iconfont icon-quanping" @click="changeScreen"></i>
        </div>
        <el-dropdown>
          <i class="iconfont icon-yuyan"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <i class="iconfont icon-zhongwen1 lan"></i>
              <span @click="changeLan('zh')">中文</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <i class="iconfont icon-yingwen lan"></i>
              <span @click="changeLan('en')">English</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <div class="fuzzy_query">
          <!-- 设计模糊查询，鼠标点击查询框，输入框变长 -->
          <el-autocomplete
            placeholder="导航快查"
            suffix-icon="el-icon-search"
            v-model="fuzzyQuery"
            :fetch-suggestions="querySearchAsync"
            @select="handleSelect"
            :trigger-on-focus="false"
            clearable
            popper-append-to-body
          >
          </el-autocomplete>
        </div>
        <div class="loginout">
          <el-button type="info" @click="logout">{{
            userName + $t('content.quit')
          }}</el-button>
        </div>
      </div>

给图标元素设置了转为flex布局，这样才能应用样式

.widgets {
    flex: 9;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .fullscreen .icon-quanping {
      transition: all 0.6s;
      display: flex;
    }
    .fullscreen .icon-quanping:hover {
      transform: scale(2);
    }
    .icon-yuyan {
      transition: all 0.6s;
      display: flex;
    }
    .icon-yuyan:hover {
      transform: scale(2);
    }
  }

---

原因分析：

提示：这里填写问题的分析：

一开始样式应用不上有两个原因：
1、应用元素并非盒模型；
2、scale(1)指放大一倍，就是本身；

---