如何用CSS实现卡片/文字镜像翻转？修复hover文字翻转异常

开发电影卡片交互时遇到以下CSS问题：鼠标悬停查看电影详情时，卡片翻转但内部文字也随之翻转。需要实现文字初始为翻转状态，鼠标悬停后恢复正常的效果，同时想了解如何用CSS实现卡片或文字的镜像翻转。

原始代码 #

CSS

body {
  background-color: var(--primary-color);
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.overview {
  background-color: white;
  padding: 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  transform: translateY(101%);
}

.movie:hover .overview {
  transform: rotateY(180deg);
  transition: transform 0.3s ease-in;
  overflow-y: auto;
}

HTML

<img src="https://i.pinimg.com/originals/a4/7b/a5/a47ba59b4a353e0928ef0551ca44f980.jpg">
<div class="movie-info">
    <h3>Title</h3>
</div>
<div class="overview">
    <h3>Overview</h3>
    lorem ipsum
    <br/>
</div>

问题分析 #

当前代码的问题在于：鼠标悬停时给.overview添加了rotateY(180deg)，导致整个详情区域（包括文字）一起翻转。想要实现文字初始翻转、hover后恢复，需要调整初始状态和hover状态的transform属性。

修正方案 #

修正后的CSS

body {
  background-color: var(--primary-color);
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.movie {
  position: relative; /* 给卡片容器添加相对定位，让absolute的overview基于它定位 */
  width: 300px; /* 设置卡片宽度，保证布局正常 */
  margin: 1rem;
  overflow: hidden; /* 隐藏溢出内容 */
}

.overview {
  background-color: white;
  padding: 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  /* 初始状态：下移隐藏 + 文字翻转 */
  transform: translateY(101%) rotateY(180deg);
  transition: transform 0.3s ease-in; /* 将过渡效果放在初始状态，保证进出动画都生效 */
  overflow-y: auto;
}

.movie:hover .overview {
  /* hover状态：移回原位 + 文字恢复正常 */
  transform: translateY(0) rotateY(0deg);
}

修正后的HTML

<div class="movie">
  <img src="https://i.pinimg.com/originals/a4/7b/a5/a47ba59b4a353e0928ef0551ca44f980.jpg" alt="电影海报">
  <div class="movie-info">
    <h3>Title</h3>
  </div>
  <div class="overview">
    <h3>Overview</h3>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.
  </div>
</div>

CSS实现镜像翻转的方法 #

CSS实现镜像翻转主要依赖transform属性，常用方案：

• 水平镜像：使用scaleX(-1)（2D缩放镜像）或rotateY(180deg)（3D翻转镜像）
• 垂直镜像：使用scaleY(-1)
• 双向镜像：使用scale(-1)（同时水平+垂直镜像）

示例代码：

/* 文字水平镜像 */
.mirror-text {
  transform: scaleX(-1);
}

/* 卡片3D水平镜像翻转 */
.mirror-card {
  transform: rotateY(180deg);
}

/* 卡片2D垂直镜像 */
.mirror-card-vertical {
  transform: scaleY(-1);
}

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