如何在电子情人节贺卡中正确定位心形元素

要实现心形在「Surprise!」正下方居中且打开贺卡后优先显示，需要调整布局结构和CSS定位，以下是具体修改步骤：

1. 调整HTML结构 #

将心形容器移动到内页（.page__2）内部，确保它属于内页内容的一部分：

<div class="codepen-wrapper">
  <div class="book">
    <div class="page">
      <div class="page__1">
        <p>Hover to open</p>
      </div>
      <div class="page__2">
        <p>Surprise!</p>
        <!-- 移动心形容器到内页中 -->
        <div class="heart-container">
          <div class="heart"></div>
        </div>
      </div>
    </div>
  </div>
</div>

2. 修改内页CSS布局 #

给.page__2添加Flex布局，实现文字和心形的垂直居中排列：

.page__2 {
  background-color: #baa898;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  /* 添加Flex垂直布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem; /* 控制文字与心形的间距 */
}

3. 修复心形动画冲突 #

原心形的rotate(-45deg)会被动画的transform覆盖，需要在动画中保留旋转属性：

@keyframes heartbeat {
  0% {
    transform: rotate(-45deg) scale(1);
  }
  50% {
    transform: rotate(-45deg) scale(1.1);
  }
  100% {
    transform: rotate(-45deg) scale(1);
  }
}

4. 优化心形容器尺寸（可选） #

根据贺卡大小调整心形容器尺寸，避免超出内页范围：

.heart-container {
  width: 80px;
  height: 140px;
}

修改后的完整CSS #

.codepen-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D9DCD6;
  height: 100vh;
}

.book {
  height: 15rem;
  width: 15rem;
  font-size: 1.4rem;
  box-shadow: 1rem 2rem 3rem rgba(0,0,0,.25);
  text-align: center;
  position: relative;
  color: #484e4a;
}

.page {
  width: 100%;
  height: 15rem;
  perspective: 1500px;
}

.page__1 {
  background-color: #0d5c63;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 1s 0.3s;
  transform-origin: 0 50%;
  z-index: 2;
}

.page__1::after {
  content: "Neat, huh?";
  color: #eff0eb;
  position: absolute;
  padding-top: 1.5rem;
  top: 0;
  left: 0;
  background-color: #424b54;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transform: rotateY(180deg);
  transition: all 0.3s 0.5s;
}

.page__2 {
  background-color: #baa898;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.page:hover .page__1 {
  transform: rotateY(-180deg);
  box-shadow: 1.5rem 2rem 3rem rgba(0, 0, 0, .25);
}

.page:hover .page__1::after {
  opacity: 1;
}

.heart-container {
  width: 80px;
  height: 140px;
}

.heart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-45deg);
  transition: transform 0.5s;
  animation: heartbeat 1s infinite alternate;
  cursor: pointer;
}

.heart:before,
.heart:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100px 100px 0 0;
  position: absolute;
  background-color: #e74c3c;
  box-shadow: -10px 6px 10px -2px rgba(0, 0, 0, 0.35);
}

.heart:before {
  left: 44%;
  top: 0;
  transform: scale(-1) rotate(225deg);
}

.heart:after {
  left: 0;
  top: 0;
  transform: scale(-1) rotate(-225deg);
}

@keyframes heartbeat {
  0% {
    transform: rotate(-45deg) scale(1);
  }
  50% {
    transform: rotate(-45deg) scale(1.1);
  }
  100% {
    transform: rotate(-45deg) scale(1);
  }
}

.heart:hover:before,
.heart:hover:after {
  background-color: unset;
  box-shadow: none;
}

.heart:hover:before {
  border: 2px dashed #ff0000;
}

.heart:hover:after {
  border: 2px dashed #ffbf00;
}

核心修改说明 #

• 将心形容器移入内页，确保它属于内页内容层级，不会被封面遮挡
• 用Flex布局快速实现文字与心形的垂直居中对齐，无需手动计算定位值
• 修复动画中transform属性覆盖旋转的问题，保证心形始终保持正确角度
• 调整心形尺寸适配贺卡大小，提升视觉协调性

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