欢迎来到我的博客！#

使用 Markdown 格式编写。

今天学到了什么#

完成了一个内容凸起的盒子翻转案例，主要有一个要点就是父盒子不要写 overflow: hidden;

裁剪发生在父元素的可视区域：子元素做了 3D 投影后，仍会被最近的 overflow 非 visible 的祖先按投影后的轮廓裁掉。也就是说，文字即使沿 Z 轴前移，超过父元素平面边缘时会被裁剪，失去“探出边缘”的视觉线索。

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Document</title>
8
  <style>
9
    * {
10
      margin: 0;
11
      padding: 0;
12
      box-sizing: border-box;
13
    }
14

15
    body {
16
      display: flex;
17
      justify-content: center;
18
      align-items: center;
19
      min-height: 100vh;
20
      background: linear-gradient(to bottom, skyblue, purple);
21
    }
22

23
    .card {
24
      width: 300px;
25
      height: 400px;
26
      position: relative;
27
      /* perspective: 500px; */
28
    }
29

30
    .card .front::before {
31
      content: "";
32
      position: absolute;
33
      width: 100%;
34
      height: 80px;
35
      top: 55%;
36
      left: 0;
37
      backface-visibility: hidden;
38
      background-color: rgba(0, 0, 0, 0.45);
39
      transform: translate3d(0%, -50%, 20px);
40
    }
41

42
    .card .front,
43
    .card .back {
44
      width: 100%;
45
      height: 100%;
46
      position: absolute;
47
      top: 0;
48
      left: 0;
49
      backface-visibility: hidden;
50
      border-radius: 15px;
51
      /* overflow: hidden; */
52
      /* 裁剪发生在父元素的可视区域：子元素做了 3D 投影后，仍会被最近的 overflow 非 visible 的祖先按投影后的轮廓裁掉。也就是说，文字即使沿 Z 轴前移，超过父元素平面边缘时会被裁剪，失去“探出边缘”的视觉线索。 */
53
      /* 开启3D空间 */
54
      transform-style: preserve-3d;
55
      transition: all 3s ease;
56
      /* perspective: 500px; */
57
    }
58

59
    .card .front {
60
      background: url(../素材/练习案例/05-王者翻转框/封面.png);
61
      background-size: cover;
62
      z-index: 2;
63
    }
64

65
    .card .front p {
66
      font-size: 15px;
67
      position: absolute;
68
      width: 100%;
69
      top: 55%;
70
      /* left: 50%; */
71
      text-align: center;
72
      transform: translate3d(0%, -50%, 60px);
73
      color: #fff;
74
      backface-visibility: hidden;
75

76
    }
77

78
    .card:hover .front {
79
      transform: rotateY(-180deg);
80
    }
81

82
    .card .back {
83
      background: #191e25;
84
      color: #fff;
85
      transform: rotateY(180deg);
86
      padding: 20px;
87
    }
88

89
    .card .back .hero {
90
      width: 250px;
91
      border-bottom: 2px solid #b49758;
92
      color: #fff;
93
      text-align: left;
94
      padding-bottom: 15px;
95
    }
96

97
    .card .back .hero h2 {
98
      font-size: 20px;
99
      /* 取消加粗 */
100
      font-weight: normal;
101
      margin-bottom: 10px;
102
    }
103

104
    .card .back .hero span {
105
      background-color: #c09f5a;
106
      padding: 2px 5px;
107
      border-radius: 2px;
108
      color: #191d20;
109
      font-weight: bold;
110
      font-size: 12px;
111
    }
112

113
    .card .back .desc {
114
      text-indent: 2em;
115
      font-size: 18px;
116
      line-height: 30px;
117
      padding: 15px 5px;
118
      text-align: left;
119
      letter-spacing: 2px;
120
    }
121

122
    .card:hover .back {
123
      transform: rotateY(0deg);
124
    }
125

126
    .threeD {
127
      transform: translateZ(60px);
128
    }
129
  </style>
130
</head>
131

132
<body>
133
  <div class="card">
134
    <div class="front">
135
      <p>快来和妲己一起玩耍吧~</p>
136
    </div>
137
    <div class="back">
138
      <div class="hero threeD">
139
        <h2>妲己</h2>
140
        <div>
141
          <span>法师</span>
142
          <span>刺客</span>
143
          <span>辅助</span>
144
        </div>
145
      </div>
146
      <div class="desc threeD">
147
        妲己，原型是商纣王宠妃妲己。职业法师，拥有先手控制敌人，技能范围广、射程够长，而且在后期超高爆发的特长。主流玩法是蹲草丛，打完就跑，二技能先手控制，然后接大招，最后一技能伤害最大化。
148
      </div>
149
    </div>
150
  </div>
151
</body>
152

153
</html>

Lovely firefly!

From Shattered Sky, I Free Fall

3D盒子翻转案例练习

欢迎来到我的博客！#

今天学到了什么#

赞助支持

目录