利用backface-visibility hidden实现3d翻转双面card

最近遇到一个需求需要再一个卡片的正反面都显示内容，通过鼠标hover触发旋转切换正反面显示。先看最终demo效果：

hover1

初步想法是先将两张图片重叠，一张默认不旋转一张旋转180deg，鼠标进入后让两者同时选择180deg。说干就干，照前面逻辑编写了简单的代码如下：

<div class="bg-trans">
  <img class="img1" src="https://img95.699pic.com/photo/50136/1351.jpg_wh300.jpg" />
  <img  class="img2" src="https://img95.699pic.com/photo/60082/6460.jpg_wh860.jpg" />
</div>

1
2
3
4

.bg-trans {
  position: relative;
  margin: 20px;
  width: 300px;
  height: 180px;
  .img1,
  .img2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 180px;
    transition: all 0.5s;
    transform: perspective(200px) rotateY(0deg);
  }
  .img2 {
    transform: perspective(200px) rotateY(-180deg);
  }
  &:hover {
    .img1 {
      transform: perspective(200px) rotateY(-180deg);
    }
    .img2 {
      transform: rotateY(0deg);
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

那上面的思路我们得到一个完全不同的结果，简直无语┐(‘～`；)┌

hover2

果断将上面的步骤分解，我们先只用一张图片做实验。果然当物体翻转后还能被看见（镜像）

hover3

这里就要借助css的backface-visibility属性，设置成hidden时可以将物体背靠观察着时不做显示，这里的旋转180deg即为背靠视线。所以只需要在图片上加上该属性就可以完美实现最终效果。

.bg-trans {
  position: relative;
  margin: 20px;
  width: 300px;
  height: 180px;
   perspective:500px;
    -moz-perspective:500px;
    -webkit-perspective:500px;
  .img1,
  .img2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 180px;
    transition: all .5s;
    transform: rotateY(0deg);
    backface-visibility: hidden;
  }
  .img2 {
    transform: rotateY(-180deg);
  }
  &:hover {
    .img1 {
      transform: rotateY(-180deg);
    }
    .img2 {
      transform: rotateY(-360deg);
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

提示

使用perspective:500px属性可以替换transform: perspective() 为保证旋转方向一致保证旋转角度同为整数或负数使用transform: perspective(200px) rotateY(0deg)写法时，hover效果的transform也必须有完整的perspective(200px) rotateY(0deg)属性。因为css的动画机制只能对属性进行变化，而属性的函数值没发分别控制，所以transform值是相当于覆盖式的，如果少写一个perspective(200px)就相当于没有定义该属性这里可以transform的单独赋值，css提供了独立的属性，如：scale、rotate、translate等来替换transform: scale() rotate() translate，详见解放生产力！transform 支持单独赋值改变

上次更新: 2025/09/05, 8:09:00

← 使用filter实现聚光灯效果正方体3d旋转→