Quostomize-FE/FlipCard2.css at main · hcu55/Quostomize-FE · GitHub

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* 카드의 스타일 */
.card2 {
    width: 9rem;
    height: 10rem;
    perspective: 1000px;
    /* 3D 효과를 위한 설정 */
    cursor: pointer;
}

.card_box2 {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.5s ease;
    /* 빠르고 부드러운 전환 */
    transform-style: preserve-3d;
    cursor: pointer;
    transform: rotate(-45deg);
    /* 기본적으로 90도 회전 유지 */
}

.card_box2 .front,
.card_box2 .back {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card_box2 .back {
    transform: rotateY(180deg) rotateZ(45deg);
    /* 뒷면은 180도 회전 */
}

/* 카드가 뒤집혔을 때의 스타일 */
.card_box2.flipped {
    transform: rotateY(180deg) rotate(90deg);
    /* 뒤집을 때에도 90도 회전 상태 유지 */
}

img {
    object-fit: contain;
    /* 이미지 크기를 부모 크기에 맞게 조정 */
}

img .card_img2 {
    width: 100%;
    height: 100%;
    /* 이미지 크기를 부모 크기에 맞게 조정 */
}