편집 요약 없음 |
편집 요약 없음 태그: 수동 되돌리기 |
||
24번째 줄: | 24번째 줄: | ||
} | } | ||
.main-id-card:hover .main-id-card-inner { | .main-id-card:hover .main-id-card-inner { | ||
transform: | transform: rotateY(180deg); | ||
} | } | ||
.main-id-card-front, | .main-id-card-front, | ||
34번째 줄: | 34번째 줄: | ||
} | } | ||
.main-id-card-front { | .main-id-card-front { | ||
transform: | transform: rotateY(0deg); | ||
} | } | ||
.main-id-card-back { | .main-id-card-back { | ||
transform: | transform: rotateY(180deg); | ||
} | } |
2024년 5월 6일 (월) 15:37 판
@media screen and (max-width: 768px) {
.main-id-card {
width: 100%;
height: 216px;
margin: .8rem 0;
user-select: none;
}
}
@media screen and (min-width: 768px) {
.main-id-card {
width: 100%;
height: 270px;
margin: .8rem 0;
user-select: none;
}
}
.main-id-card
.main-id-card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform .25s;
}
.main-id-card:hover .main-id-card-inner {
transform: rotateY(180deg);
}
.main-id-card-front,
.main-id-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.main-id-card-front {
transform: rotateY(0deg);
}
.main-id-card-back {
transform: rotateY(180deg);
}