CSS card flip效果如何实现每次点击都沿同一方向翻转？

要实现每次点击都沿同一方向翻转卡片，核心逻辑是让旋转角度持续累加，而非在0/180度之间切换，具体修改方案如下：

1. 修改JS逻辑 #

替换原有点击事件代码，通过自定义属性存储当前旋转角度，每次点击累加180度即可：

$('.flip-container .flipper').click(function() {
    const $container = $(this).closest('.flip-container');
    // 读取当前累计旋转角度，初始值为0
    let rotateDeg = $container.data('rotate') || 0;
    // 每次累加180度，保证旋转方向一致
    rotateDeg += 180;
    // 存储新的角度值并应用变换
    $container.data('rotate', rotateDeg);
    $(this).css('transform', `rotateY(${rotateDeg}deg)`);
});

2. 调整CSS规则 #

删除原有控制翻转的类选择器规则即可，其余样式保持不变：

/* 删掉这行原有规则 */
/* .flip-container.hover .flipper {
    transform: rotateY(180deg);
} */

实现原理 #

• 原有方案通过切换类让transform在0和180度之间来回切换，角度值下降时动画会反向播放，就出现了往回翻的效果
• 调整后角度持续累加，数值始终正向增长，动画就会一直沿同一方向播放
• 正反面的backface-visibility: hidden配置会自动处理可见性：角度为180的偶数倍时正面朝上，奇数倍时背面朝上，和原有展示逻辑完全一致

如果需要沿逆时针方向翻转，只需把rotateDeg += 180改为rotateDeg -= 180即可。

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