如何通过css选择器实现卡片翻转效果

答案是使用CSS的transform、perspective和backface-visibility属性，结合:hover或:checked选择器实现卡片翻转。首先设置父容器的perspective营造3D视觉，然后通过.transform-style: preserve-3d保持3D空间，利用transform: rotateY(180deg)实现翻转动画，前后两面用backface-visibility: hidden避免重叠显示，结构上采用包含前后两面的.card容器，可通过:hover触发悬停翻转，或用隐藏复选框配合:checked实现点击切换，整个过程无需JavaScript即可完成交互效果。

要实现卡片翻转效果，关键在于使用 CSS 的 transform 和 perspective 属性，结合伪类选择器和过渡动画。整个过程不依赖 JavaScript，仅通过 CSS 选择器即可完成基础的悬停翻转交互。

1. 设置容器透视（perspective）

为了让翻转具有 3D 效果，父容器需要设置 perspective，模拟视觉景深。

通常这样写：

.card-container {
  perspective: 1000px;
}

2. 定义翻转卡片结构

HTML 结构一般包含外层容器、翻转盒子和前后两个面：

  
    正面内容
    背面内容
  

3. 使用 transform 实现翻转

通过 :hover 选择器触发翻转，利用 transform: rotateY() 实现 Y 轴旋转。

关键样式如下：

.card {
  position: relative;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

说明：

• transform-style: preserve-3d 确保子元素保持 3D 空间。
• backface-visibility: hidden 防止背面在正面显示时被看到。
• 背面预先旋转 180 度，翻转后正好正对用户。

4. 可选：添加点击切换效果

如果想用点击代替悬停，可以结合 :checked 选择器与隐藏的复选框或 radio 按钮。

  
    点击我翻转
    已翻转！
  

CSS 中使用 :checked ~ 选择器控制状态：

#flip-toggle:checked ~ .card {
  transform: rotateY(180deg);
}

基本上就这些。通过合理的结构和 CSS 选择器（如 :hover、:checked），配合 transform 和过渡属性，就能实现流畅的卡片翻转效果。关键是理解 3D 变换的层级关系和可见性控制。不复杂但容易忽略细节。