如何使用CSS实现卡片翻转动画？现有transition代码无法正常运行

你当前的代码存在以下几处问题，调整后即可正常运行：

• 缺失背面可见性配置
  需要给.pagesfront和.pagesback添加backface-visibility: hidden属性，避免元素旋转到背面时依然可见，导致两个面内容重叠。
• 背面元素初始状态未翻转
  当前.pagesback默认朝向和正面完全一致，就算正面翻过去，背面也是背对用户视角的，无法显示内容，需要给.pagesback添加初始样式transform: rotateY(180deg)。
• 缺失3D透视配置
  3D翻转效果依赖透视属性才能呈现立体效果，需要给父容器.paper添加perspective: 1200px属性，数值可按需调整，数值越小透视变形效果越强。
• 翻转逻辑冗余
  你当前给正反两个面同时添加旋转的逻辑错误，绕左边缘翻转的场景下，仅需给正面元素添加旋转即可。

修复后的完整代码如下：

.paper{
    border: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* 新增透视属性 */
    perspective: 1200px;
}
.pagesfront,
.pagesback{
    background-color: #fff3d6;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s;
    /* 新增背面隐藏属性 */
    backface-visibility: hidden;
}

.pagesfront{
    z-index: 1;
}

.pagesback{
    z-index: 0;
    /* 新增初始翻转配置 */
    transform: rotateY(180deg);
}

.flipped .pagesfront{
    transform: rotateY(-180deg);
}

最后注意确认flipped类是添加到.paper元素上，保证选择器可以正常命中子元素。

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