[CSS] 카드 Flip 3D 효과

preseve-3d

현재 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>

perspective은 통과가 안 된다!!

🚨 문제 발생 🚨

• .world에게 perspective을 줬는데 중간에 div.card라는 position을 잡아주는 div 때문에 3d 효과가 적용이 안 된다

.card {
    transform-style: preserve-3d;
}

말그대로, 3d 효과를 유지하게끔 해준다

[번외] relative, absolute

.card {
    position: relative;
}

.card-side {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

앞뒷면 만들기

.card-side-front {
    z-index: 1;
    background: white;
}

.card-side-back {
    background: red;
    transform: rotateY(180deg);
}

• 뒷면 rotateY(180deg) 기본값으로

backface-visibility

.card-side {
    backface-visibility: hidden;
}

문처럼 만들기

rotate의 축을 바꾼다는 느낌

transform-origin

.card {
    transform-style: preserve-3d;
    transform-origin: left;
}