在CSS中点击时如何创建一个按钮总是同向旋转？

Question

我的目标是在 css 中制作一张可翻转的卡片，点击时它总是绕 x 轴旋转，但我不知道如何让卡片每次都沿相同方向旋转。 我得到的只是第一次点击时卡片旋转了180°，再次点击时它会向相反的方向旋转回去，这不是我想要达到的那种效果。 我找到了这个解决方案，但它使用 JQuery 并且感觉很老套，是否有更直接的解决方案，甚至在纯 CSS 中？

提前感谢任何帮助。

到目前为止我取得的成就的一个小代码示例：

 function flip(id) { document.getElementById(id).querySelector(".flip-content").classList.toggle("flipped"); }

 .flip-card { background: transparent; perspective: 1000px; width: 200px; height: 200px; transition: transform 0.3s; transform: scale(90%); }.flip-content { width: 100%; height: 100%; transform-style: preserve-3d; transition: all 0.6s; box-shadow: 0 20px 32px 0 rgba(0, 0, 0, 0.2); }.flip-content.flipped { transform: rotateX(180deg); box-shadow: 0 -20px 32px 0 rgba(0, 0, 0, 0.2); }

 <div id="flip" class="flip-card" onclick="flip('flip')"> <div class="flip-content"> </div> </div>

Answer 1

您可以直接在 javascript 元素上运行转换，而无需切换 class，如下所示：

 let rot = 0; function flip(id) { rot += 180; const flipContent = document.getElementById(id).querySelector(".flip-content"); flipContent.style.transform = `rotateX(${rot}deg)`; flipContent.style['box-shadow'] = (rot % 360 === 0)? `0 20px 32px 0 rgba(0, 0, 0, 0.2)`: `0 -20px 32px 0 rgba(0, 0, 0, 0.2)`; }

 .flip-card { background: transparent; perspective: 1000px; width: 200px; height: 200px; transition: transform 0.3s; transform: scale(90%); }.flip-content { width: 100%; height: 100%; transform-style: preserve-3d; transition: all 0.6s; box-shadow: 0 20px 32px 0 rgba(0, 0, 0, 0.2); }.flip-content.flipped { transform: rotateX(180deg); box-shadow: 0 -20px 32px 0 rgba(0, 0, 0, 0.2); }

 <div id="flip" class="flip-card" onclick="flip('flip')"> <div class="flip-content"> </div> </div>