一个简单的 3D 卡片效果

嘛… 业务需求，就做了一下

HTML

HTML 结构很简单，一个 relative 的父元素，两个 absolute 的子元素（一个正面一个背面）

1
2
3
4
5
6
<div class="wrapper">
  <div id="card">
    <div class="front">这是正面哦</div>
    <div class="back">这是背面~</div>
  </div>
</div>

CSS 基础样式

父元素长宽设定，居中

transform-style: preserve-3d;将变换舞台设置为 3d（有遮挡效果）

MDN 上时这样说的:
CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。
如果选择平面，元素的子元素将不会有 3D 的遮挡关系。
由于这个属性不会被继承，因此必须为元素的所有非叶子子元素设置它

perspective: 500px;景深
perspective-origin: bottom;视角

1
2
3
4
5
6
7
8
9
10
11
#card {
  width: 400px;
  height: 180px;
  margin: 30px auto;
  position: relative;
  cursor: pointer;

  transform-style: preserve-3d;
  perspective: 500px;
  /* perspective-origin: bottom; */
}

子元素的共同属性

transition设定过渡效果
backface-visibility: hidden;这个是为了被转到背面的元素不显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.front,
.back {
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;

  transition: transform 0.5s;
  backface-visibility: hidden;
}

子元素各自的属性

正面的元素初始不旋转
背面的元素初始旋转 180deg
设定一个好看的背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.front {
  background: linear-gradient(135deg, #ddd 25%, transparent 25%) -10px 0, linear-gradient(
        225deg,
        #ddd 25%,
        transparent 25%
      ) -10px 0, linear-gradient(315deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, #ddd 25%, transparent 25%);
  background-size: calc(2 * 10px) calc(2 * 10px);

  transform: rotateY(0);
}
.back {
  background-image: linear-gradient(0deg, transparent 50%, skyblue 50%);
  background-size: 50px 50px;

  transform: rotateY(180deg);
}

hover 触发旋转

hover 应该给父元素，给子元素的话，就转不回来了

1
2
3
4
5
6
#card:hover .front {
  transform: rotateY(180deg);
}
#card:hover .back {
  transform: rotateY(360deg);
}

Codepen