[CSS] Card flip

버튼 클릭시 카드가 뒤집히는 애니메이션 구현하기 ~0~

​https://v3sz7n.csb.app/

Static Template

1. 처음엔 검정색 카드가 보이고
2. 버튼 클릭시 검정색카드가 뒤집히면서 코랄색 뒷면이 보인다.
3. 버튼을 다시 클릭시 코랄색 뒷면이 뒤집히면서 하늘색의 앞면이 보인다

참고

https://codepen.io/samerpik/pen/NWzgqx

3D Flip Card Effect

 

js/jquery는 class 토글/추가 하는 정도로만 사용하고

나머지는 다 CSS로!!

 

//html
<div class="container">
    <button type="button">button</button>
    <div class="card">
        <div class="card_front">
            <div class="card_front_default">card</div> //검정색 기본 카드
            <div class="card_cont">new card 2</div> //한 번 더 뒤집었을때 보여질 카드
        </div>
        <div class="card_back">
            <div class="card_cont">new card 1</div> //뒤집었을때 보여질 카드
        </div>
    </div>
</div>

//js
$("button").click(function () {
    $(".card").toggleClass("flipped");
    setInterval(function () {
        $(".card_front_default").addClass("hide");
    }, 300); //카드 뒤집힘 3초후 맨처음 보여졌던 검정색 카드는 숨겨버림
});

 

대망의 CSS 뚜둔

.container {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    //원근값
}
.card {
    width: 200px;
    height: 300px;
    position: relative;
    /*transition effects */
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    //3d로 변형시킴
}
.card.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    //flipped 클래스가 붙으면 180도 뒤집어버림
}
.card > div {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    //뒤집힐때의 뒷면 안보이게 함
}
.card_back { 
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    //뒤집힌 상태가 기본 -> flipped가 붙으면 뒤집히면서 rotateY(0)상태로 
}
.card > div > div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card_front_default {
    background: #000;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.card_front_default.hide {
    display: none;
}
.card_front .card_cont {
    background: skyblue;
}
.card_back .card_cont {
    background: coral;
}
button {
    margin-bottom: 10px;
}

CSS로 하니 너무 쉽게 표현 가능 !

까도 까도 계속 나오는 CSS의 매력