如何使用CSS transform:scale实现不同形状图片的hover放大效果

完全可以实现，你担心的矩形盒状形态问题并不会影响最终效果，具体实现思路和代码如下：

• 实现逻辑
  多张图片放在同一个定位容器内分别定位即可，每张图片都是独立DOM节点，hover交互互不干扰。CSS的transform: scale()属性仅做视觉层面的缩放，不会改变元素实际占据的盒空间，也不会挤压其他图片的布局，完美匹配你要的悬停轻微放大需求。
  如果你的A、B、C图是带透明背景的资源，缩放时只会显示图片本身的不规则形状，完全不会露出矩形盒边界；如果是不透明图片，也可以搭配clip-path属性自定义裁剪形状，缩放时裁剪效果同步生效。

• 示例代码
  HTML结构：

  <div class="img-container">
    <!-- 按叠放顺序放三张图，层级靠下的放前面 -->
    <img src="path/to/b.png" alt="B图" class="img-item img-b">
    <img src="path/to/c.png" alt="C图" class="img-item img-c">
    <img src="path/to/a.png" alt="A图" class="img-item img-a">
  </div>
  

  CSS样式：

  .img-container {
    position: relative;
    width: 600px; /* 替换为你实际需要的容器宽度 */
    height: 400px; /* 替换为你实际需要的容器高度 */
    /* 不需要裁剪超出区域可删除下面这行 */
    overflow: hidden;
  }
  .img-item {
    position: absolute;
    transition: transform 0.3s ease; /* 悬停过渡动画，时长可调整 */
  }
  /* 单独给每张图调整定位参数，放到对应位置 */
  .img-b {
    top: 10px;
    left: 20px;
  }
  .img-c {
    top: 50px;
    right: 30px;
  }
  .img-a {
    bottom: 20px;
    left: 100px;
  }
  /*  hover A图时放大5%，缩放比例可自行调整 */
  .img-a:hover {
    transform: scale(1.05);
    /* 如果需要放大时A图层级高于其他图，可追加下面这行 */
    /* z-index: 10; */
  }
  

内容的提问来源于stack exchange，提问作者Riky Andreas