如何不使用transform:scale实现div卡片及内容同步缩放？

不需要依赖JavaScript，也不需要手动试padding值。你遇到的错位问题本质是transform: scale()只改变元素视觉渲染效果，不触发文档流重排，内部子元素的布局计算始终基于变换前的原始容器尺寸，只要放弃scale实现放大，改用真实修改容器宽高+负margin匹配锚点的方案，就能完全解决问题。

实现逻辑 #

• 给卡片设置固定的基础宽高作为缩放基准，网格gap预留足够的放大扩展空间
• 不同位置的卡片hover时，直接将宽高修改为目标放大倍数的尺寸，通过负margin抵消放大产生的位移，实现和transform-origin完全一致的锚点放大效果，整个过程容器尺寸是真实DOM尺寸，内部元素布局会自动按新尺寸计算
• 分别定义默认态、hover态的SVG和隐藏内容样式即可，所有定位规则完全按正常CSS流生效，不会出现错位

核心代码 #

*,*::before,*::after {
  box-sizing: border-box;
}

html,body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  background: #b9c29e;
  display: grid;
}

.base-flexbox-layout {
  display: flex;
}

.base-grid-layout {
  display: grid;
}

.item-grid-container {
    width: 80%;
    flex-direction: column;
    justify-content: center;
}
.item-grid {
    position: relative;
    width: 90%;
    height: 60%;
    margin: 0 auto;
    grid-template-rows: repeat(3, 120px); /* 行高匹配卡片基础高度，留足gap */
    grid-template-columns: repeat(3, 160px); /* 列宽匹配卡片基础宽度，留足gap */
    gap: 60px 40px; /* gap预留放大扩展空间，避免未hover时重叠 */
    justify-content: center;
    align-content: center;
}
.item-grid div {
    position: relative;
    width: 120px; /* 卡片基础宽度 */
    height: 80px; /* 卡片基础高度 */
    background: linear-gradient(to right bottom, #FAFAE0, #FAEDCD);
    box-shadow: 0px 0px 5px 7px #B9C29E;
    border-radius: 10px;
    transition: all 1s ease-in-out;
    overflow: hidden;
}
/* 默认态SVG 居中 占80%尺寸 */
.item-grid div svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 80%;
    height: 80%;
    transition: all 1s ease-in-out;
}

/* 各位置卡片hover 宽高1.5/2倍放大 负margin匹配对应锚点 */
#top-left:hover {
    width: 180px;
    height: 160px;
    z-index: 99;
}
#top-middle:hover {
    width: 180px;
    height: 160px;
    margin: 0 -30px;
    z-index: 99;
}
#top-right:hover {
    width: 180px;
    height: 160px;
    margin-left: -60px;
    z-index: 99;
}
#middle-left:hover {
    width: 180px;
    height: 160px;
    margin: -40px 0;
    z-index: 99;
}
#middle-middle:hover {
    width: 180px;
    height: 160px;
    margin: -40px -30px;
    z-index: 99;
}
#middle-right:hover {
    width: 180px;
    height: 160px;
    margin: -40px -60px -40px 0;
    z-index: 99;
}
#bottom-left:hover {
    width: 180px;
    height: 160px;
    margin-top: -80px;
    z-index: 99;
}
#bottom-middle:hover {
    width: 180px;
    height: 160px;
    margin: -80px -30px 0;
    z-index: 99;
}
#bottom-right:hover {
    width: 180px;
    height: 160px;
    margin: -80px -60px 0 0;
    z-index: 99;
}

/* hover态SVG 顶部水平居中 */
.item-grid div:hover svg {
    inset: auto;
    top: 12px;
    left: 0;
    right: 0;
    bottom: auto;
    margin: 0 auto;
    width: 40%;
    height: auto;
}

/* 卡片隐藏内容 默认透明 hover显示 */
.card-hidden {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}
.item-grid div:hover .card-hidden {
    opacity: 1;
}

方案优势 #

• 无JavaScript依赖，纯CSS实现性能更高，不会出现JS计算延迟
• 所有数值按缩放比例计算，不需要手动试错调padding
• 容器为真实DOM尺寸，内部所有元素（文本、按钮、SVG）的定位、排版完全符合正常CSS规则，不会出现scale带来的内容错位、文字模糊问题
• 如果需要做响应式，只需要把卡片基础宽高、网格gap改成相对单位（rem、vw），hover态的宽高和负margin按相同比例换算即可

内容的提问来源于stack exchange，提问作者Paul Clauss