[css]3d 카드 뒤집기

저 검은 화면 왜 저리 긴거냐고 ;;;

F

B

 

 

 

 

HTML

    <div class="world">
        <div class="card">
            <div class="card_side card_side_front">F</div>
            <div class="card_side card_side_back">B</div>
        </div>
    </div>

 

CSS

.world {
    width: 60vw;
    height: 60vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 600px; /*인간의 시야각에서 사물이 표현됨(3d 효과 적용 시 필요) */  
    transition: 1s; /* world 클래스인 검은색 배경 클릭하면 트랜잭션 효과 발생*/
}

.world .card{
    position: relative; /* 부모가 relative 면, 자식이 absolute일 때 뷰포트 기준이 됨. */
    width: 150px;
    height: 200px;
    transform-style: preserve-3d;  /*perspective 효과가 리프노드(마지막 요소 노드) 까지 적용되도록 해줌 */  
}

.world .card .card_side{
    left:0; top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5em;
    font-size: 1.5em;
    background-color: red;
}

.world .card .card_side_front{ /* 카드 앞면 */
    background-color: white;
    z-index: 1;
    backface-visibility: hidden; /* 앞면의 뒷쪽 영역이 안보이게 함. 뒤집을 때 숨겨짐*/
}

.world .card .card_side_back{ /* 카드 뒷면*/
    background:linear-gradient(-120deg,red, black);
    transform: rotateY(180deg); /* 미리 뒷면으로 돌려둬야 뒤집을 때 앞면이 보임*/
}

.world:hover .card{
    cursor: pointer;
    transform: rotateY(180deg); /* 검은색 배경 부분 마우스 올리면 card 태그를 y축의 중앙을 기준으로 180도 회전함*/
}