背景为图片的翻转盒(flip box)hover时rotateY(180deg)旋转失效求助

架构老林

2026-9-25

问题修复方案

核心问题梳理

你第二个.f-e类的服务容器多嵌套了一层.dev元素，翻转动画加在父级.container-service上，但.dev没有开启3d空间，导致内部正反卡片的backface-visibility属性失效，出现翻转异常
nth-child选择器用法错误：nth-child匹配的是父级下所有同级子元素的排序，你父级.info-service下第一个子元素是.title-service，所以你写的.container-service:nth-child(3)实际匹配的是第二个服务容器，而非第三个
.container-service加了多余的padding-top:25%，且没有统一加position: relative，会影响绝对定位的正反卡片布局

具体修改步骤

CSS修改

.container-service {
  width: 70vh;
  height: 50vh;
  margin-left: 30px;
  background: grey;
  margin-bottom: 10px;
  align-items: center;
  text-align: center;
  /* 删掉多余的padding-top:25% */
  position: relative; /* 所有容器都加相对定位，不用单独给第三个加 */
  transform-style: preserve-3d;
  transition: 0.3s ease all;
}

/* 如果保留.dev嵌套结构，需要给.dev加3d空间配置 */
.dev {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* 修正nth-child序号，要匹配第三个服务容器就写nth-child(4) */
.container-service:nth-child(4) {
  background-image: url(../Responsive\ Website/img-2.jpg);
  background-size: cover;
}

更推荐的HTML优化

直接删掉第二个容器多余的.dev嵌套，和其他两个容器结构保持一致，无需额外加CSS：

<div class="container-service f-e">
  <div class="front-card dev">
    <span><i class="fas fa-laptop-code"></i></span>
    <h3>Front Dev</h3>
  </div>
  <div class="back-card">
    <h3>Front Dev</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
      optio, eum esse doloremque molestias aspernatur.
    </p>
  </div>
</div>