React翻转卡片Hover时边框重叠问题修复请求

问题概述 #

实现的React翻转卡片在鼠标悬停时，.flip-card-inner的边框会偏移并与.flip-card-back的边框重叠，需要实现悬停时.flip-card-back的边框完全替代.flip-card-inner的边框。

状态说明 #

• 非悬停状态：
• 当前悬停状态：
• 期望悬停状态：

现有代码 #

Card.jsx #

import React from 'react';
import './style.scss';

const Card = () => {
  return (
    <div className="flip-card">
      <div className="flip-card-inner">
        <div className="flip-card-front">
          <h3>卡片正面</h3>
          <p>正面内容</p>
        </div>
        <div className="flip-card-back">
          <h3>卡片背面</h3>
          <p>背面内容</p>
        </div>
      </div>
    </div>
  );
};

export default Card;

style.scss #

.flip-card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border: 2px solid #ccc; /* 原inner边框 */
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flip-card-front {
  background-color: #f9f9f9;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  border: 2px solid #2c3e50; /* 背面边框 */
}

解决方案 #

问题根源在于翻转时.flip-card-inner的边框会跟随transform旋转，导致与背面边框重叠。解决思路是：

1. 悬停时隐藏.flip-card-inner的边框
2. 确保背面边框在翻转后完全覆盖原位置，避免偏移

修改后的style.scss #

.flip-card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border: 2px solid #ccc; /* 原inner边框 */
}

/* 悬停时隐藏inner的边框 */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  border: none;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #ccc;
  box-sizing: border-box; /* 确保边框不会撑开元素 */
}

.flip-card-front {
  background-color: #f9f9f9;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  border: 2px solid #2c3e50; /* 背面边框 */
  box-sizing: border-box;
}

关键修改点 #

• 给.flip-card-front和.flip-card-back添加box-sizing: border-box，避免边框改变元素尺寸
• 悬停时给.flip-card-inner设置border: none，隐藏原边框
• 给正面添加与原inner一致的边框，保持非悬停状态的视觉一致性

这样修改后，悬停时卡片翻转，原inner边框隐藏，背面边框完全替代显示，不会出现重叠偏移的情况。

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