CSS Transform翻转异常：div::after伪元素hover时反向显示问题排查

你的代码存在两处核心错误导致背面内容反向：

• 没有给div::after设置初始旋转角度，父元素沿Y轴翻转180度时，::after会跟随父元素同步旋转，原本和正面朝向一致的背面内容，旋转后就会呈现镜像反向的效果
• div::after未添加backface-visibility: hidden属性，3D变换场景下依赖z-index: -1控制层级的方式不可靠，还可能出现两面内容重叠的问题

只需要修改div::after的CSS规则即可：

div::after {
    content: "Back";
    color: white;
    background-color: #1692FC;
    font-size: 24px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 删掉原有z-index: -1，新增以下两行 */
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

• 初始状态下给::after提前沿Y轴旋转180度，此时它背对用户，backface-visibility: hidden属性会让它默认不可见，只有正面的::before显示
• 父元素hover时旋转-180度，相当于把原本背对用户的::after转到正对用户的角度，此时::after的内容方向刚好是正向的，而正面的::before转到背对用户的角度自动隐藏，就实现了正常的翻牌效果

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