在Styled Components中实现卡片翻转动画：修复翻转异常问题

问题分析 #

你的代码存在两个核心问题：

1. 错误的hover选择器：FlipCard中的&:hover, ${FlipCardInner}使用逗号分隔选择器，导致FlipCardInner默认就会应用rotateY(180deg)，同时FlipCard hover时自身也会旋转，造成双重旋转的异常效果。
2. 冗余的语法：FlipCardFront和FlipCardBack中的&{}包裹样式是多余的，虽然不影响功能，但不符合Styled Components的常规写法。

修复后的完整代码 #

import styled from 'styled-components';

export const FlipCardInner = styled.div`
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
`

export const FlipCardTitle = styled.p`
    font-size: 1.5em;
    font-weight: 900;
    text-align: center;
    margin: 0;
`

export const FlipCard = styled.div`
    background-color: transparent;
    width: 190px;
    height: 254px;
    perspective: 1000px;
    
    // 修复：hover时仅触发内部容器的旋转，而非自身和内部同时旋转
    &:hover ${FlipCardInner} {
        transform: rotateY(180deg);
    }
`

export const FlipCardFront = styled.div`
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid coral;
    border-radius: 1rem;
    background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
        rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
    color: coral;
`

export const FlipCardBack = styled.div`
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid coral;
    border-radius: 1rem;
    background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
        bisque 40%, rgb(255, 185, 160) 78%);
    color: white;
    transform: rotateY(180deg);
`

修复效果说明 #

• 初始状态：FlipCardFront正常显示，FlipCardBack因rotateY(180deg)和backface-visibility: hidden被隐藏。
• hover时：FlipCardInner旋转180度，FlipCardBack转为可见，FlipCardFront被隐藏。
• 离开hover：FlipCardInner恢复初始状态，回到正面显示。

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