如何解决CSS卡片翻转效果触发时推开其他页面元素的问题

问题根因 #

你的「联系我」卡片父容器.btn属于常规文档流元素，你为其设置了宽高的过渡动画，卡片翻转时会动态修改该容器的宽高值，高度变化会直接挤压下方的页脚元素，导致布局偏移。同时.btn-back中无用的margin-bottom: -500px属性也会加剧布局异常。

修复方案 #

推荐采用固定卡片容器尺寸的方案，避免容器尺寸变化影响外部布局：

1. 给.btn设置固定的、足够容纳背面内容的宽高，翻转时仅修改3D变换属性，不修改宽高
2. 移除.btn-back的负margin属性，调整内容排版适配容器尺寸
3. 正面文字改用flex居中，替代固定行高适配容器高度

修改后CSS示例 #

.btn {
  display: block;
  position: relative;
  /* 固定宽高，值可根据你的实际内容调整，翻转时不要修改这两个属性 */
  width: 450px;
  height: 180px;
  margin: 24px auto;
  /* 移除宽高过渡，仅保留变换过渡 */
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  text-align: center;
}

/* 翻转时仅添加该类，仅修改变换属性 */
.btn.active {
  transform: rotateX(180deg);
}

.btn-front {
  position: absolute;
  border-radius: 7px;
  /* 用flex居中替代固定行高，适配容器高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #1f2839;
  color: #ACBCE8;
  cursor: pointer;
  backface-visibility: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.btn-front:hover {
  background-color: #8BA3D6;
}

.btn-back {
  position: absolute;
  border-radius: 7px;
  width: 100%;
  height: 100%;
  /* 移除无用的负margin */
  background-color: #8BA3D6;
  color: #1f2839;
  transform: translateZ(-2px) rotateX(180deg);
  overflow: hidden;
  /* 加内边距优化内容排版 */
  padding: 16px;
  box-sizing: border-box;
  transition: box-shadow 0.8s ease;
}

修改完成后卡片容器尺寸始终固定，翻转时只有3D变换不会改变文档流占位，也就不会挤压页脚导致布局偏移。

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