如何通过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 结构一般包含外层容器、翻转盒子和前后两个面：

<div class="card-container">
  <div class="card">
    <div class="card-face front">正面内容</div>
    <div class="card-face back">背面内容</div>
  </div>
</div>

3. 使用 transform 实现翻转

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

立即学习“前端免费学习笔记（深入）”；

AI卡通生成器

免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象

51

查看详情

关键样式如下：

.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 按钮。

<input type="checkbox" id="flip-toggle" style="display:none;">
<label for="flip-toggle" class="card-container">
  <div class="card">
    <div class="front">点击我翻转</div>
    <div class="back">已翻转！</div>
  </div>
</label>

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

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

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

以上就是如何通过css选择器实现卡片翻转效果的详细内容，更多请关注php中文网其它相关文章！