卡片翻转效果的实现思路

卡片翻转效果的实现思路

HTML 基础布局

<div class="card">
  <img class="face" src="images/chrome_eSCSt8hUpR.png" />

  <p class="back">
    <span>背面背景span>
  p>
div>
1
2
3
4
5
6
7

布局完成后如下所示：

CSS 实现步骤

1. 鼠标悬停时卡片旋转，但此时没有动画效果，需要添加卡片的过渡动画效果：

.card:hover .face {
  transform: rotateY(-180deg);
}
1
2
3

2. 为卡片的正面添加过渡效果，并在反转时隐藏：

.face {
  transition: 0.5s;
  backface-visibility: hidden;
}
1
2
3
4

此时的效果如下：

3. 创建一个 3D 场景，为卡片添加perspective属性：

.card {
  perspective: 500px;
}
1
2
3

CSS 属性perspective用于创建一个 3D 场景，控制元素在该场景中的视角和深度感。它定义了观察者与元素之间的距离，从而影响元素的透视效果。

在给定的样式代码中，.card类被赋予了perspective: 500px;属性。这意味着该类中的元素将具有 500 像素的透视效果。透视效果使得元素在视觉上具有远近感，离观察者越近的元素看起来越大，离观察者越远的元素看起来越小。

通过设置透视效果，可以在一些 3D 转换中产生更真实的效果，例如在鼠标悬停时翻转卡片。

请注意，透视效果只对具有 3D 转换属性（例如rotateX、rotateY等）的元素起作用。

完整的 CSS 代码如下：

.back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: all 0.5s;
}

.card:hover .back {
  transform: rotateY(0);
}

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

.face {
  transition: 0.5s;
  backface-visibility: hidden;
}

.card {
  perspective: 500px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这段样式的作用是在鼠标悬停在.card元素上时，通过旋转.back元素的 Y 轴，实现卡片翻转的效果。初始状态下，.back元素背面朝向前面，当鼠标悬停时，通过旋转使其正面朝向前面，从而呈现卡片翻转的动画效果。过渡效果的添加使得翻转过程更加平滑。透视效果通过设置.card元素的perspective属性来实现，增强了翻转效果的真实感。