纯 CSS 实现 3D 翻转卡片

网站侧边栏放二维码、联系方式时，正反面切换的 3D 翻转卡片比普通链接更有质感。整段代码只有 CSS，不需要一行 JS。把鼠标移到下方卡片上试试：

一、核心原理

关键就三个属性：外层容器加 perspective 产生透视，内层用 transform-style: preserve-3d 保留 3D 层级，两个面各自 backface-visibility: hidden 隐藏背面。

二、完整代码

.flip-inner {
  transition: transform .6s;
  transform-style: preserve-3d;
}
.flip-demo:hover .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); }

三、落地到侧边栏

把容器宽度设为侧边栏宽度，正面放图标和文案，背面放二维码图片即可。需要点击跳转时，用 <a> 包一层，或加一小段监听翻转结束事件。