1.container {
2 position: relative;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}
7
8.container .glass {
9 position: relative;
10 width: 180px;
11 height: 200px;
12 background: linear-gradient(#fff2, transparent);
13 border: 1px solid rgba(255, 255, 255, 0.1);
14 box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 transition: 0.5s;
19 border-radius: 10px;
20 margin: 0 -45px;
21 backdrop-filter: blur(10px);
22 transform: rotate(calc(var(--r) * 1deg));
23}
24
25.container:hover .glass {
26 transform: rotate(0deg);
27 margin: 0 10px;
28}
29
30.container .glass::before {
31 content: attr(data-text);
32 position: absolute;
33 bottom: 0;
34 width: 100%;
35 height: 40px;
36 background: rgba(255, 255, 255, 0.05);
37 display: flex;
38 justify-content: center;
39 align-items: center;
40 color: #fff;
41}
42.container .glass svg {
43 font-size: 2.5em;
44 fill: #fff;
45}
46
