悬停时按钮绕 X 轴翻转到背面，像按下一个开关
← 返回 按钮 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx{padding:40px 0}
.fx .flip{position:relative;width:200px;height:46px;margin:0 auto;perspective:600px;cursor:pointer}
.fx .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s}
.fx .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#fff;font-size:15px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fx .f1{background:#4a9eff}
.fx .f2{background:#f778ba;transform:rotateX(90deg)}
.fx .flip:hover .inner{transform:rotateX(-90deg)}<div class="fx">
<div class="flip"><div class="inner"><div class="face f1">正面</div><div class="face f2">背面</div></div></div>
</div>