CSS100Day(14)-3D卡片翻转

1
.dis {
2
    width: 400px;
3
    height: 400px;
4
    overflow: hidden;
5
}
6

7
.frame {
8
    position: relative;
9
    width: 400px;
10
    height: 400px;
11
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
12
    background: #4b4841;
13
}
14

15
.card {
16
    position: absolute;
17
    width: 320px;
18
    height: 180px;
19
    top: 110px;
20
    left: 40px;
21
    perspective: 800px;
22

23
    &:hover .flip {
24
        transform: rotateX(180deg);
25
        box-shadow: 8px -10px 15px 0 rgba(0, 0, 0, 0.5);
26
    }
27

28
    .flip {
29
        width: 100%;
30
        height: 100%;
31
        transition: all 1s ease-in-out;
32
        box-shadow: 8px 10px 15px 0 rgba(0, 0, 0, 0.5);
33
    }
34

35
    .front,
36
    .back {
37
        position: absolute;
38
        inset: 0;
39
        background: #ffce4e;
40
        backface-visibility: hidden;
41
        border-radius: 3px;
42
        overflow: hidden;
43
        text-align: center;
44
    }
45

46
    .front {
47
        transform: rotateX(0);
48
        display: grid;
49
        place-content: center;
50
    }
51

52
    .back {
53
        transform: rotateX(180deg);
54
        display: grid;
55
        place-content: center;
56
    }
57
}