[css] 간단하게 css로 3D card 뒤집는 애니메이션 효과

 

양면이 서로 다른 카드의 형태를 겹쳐놓고

hover했을 때,

카드 뒤집어지는 효과가 적용되도록 하고 싶었다.

 

 

css3에서 perserve-3d등을

이용해서 구동할 수 있다고 한다.

 

주석처리된 부분들만 잘 넣으면 아마 잘 구동되지 싶다.

 

 

(인터넷익스플로러 x)

 

 

 

1. 구조

<section><!--3D 공간-->
    <div class="card"> <!--카드 묶기-->
        <div class="front">front</div><!--카드 앞면-->
        <div class="back">back</div><!--카드 뒷면-->
    </div>
</section>

원근감을 줄 수 있는 영역이(section)가 있어야 하고,
카드 2장을 감쌀 부모(.card)와 자식으로 앞면(.front)과 뒷면(.back)을 만들어야 한다. 

 

2. 스타일

1) 요소 영역 배치 및 위치

section {
    width: 100vw;
    height:100vh;
    background: indianred;
    position: relative;
}

.card {
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    height:400px;
    width: 300px;
    transition:all 1s;
}

.card > div {
    height:100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top:0;
}

.card .front {
    background: beige;
    z-index: 9999;
}

.card .back {
    background: orange;
}

부모와 카드들의 크기를 부여하고 위치를 잡아줬다. 

 

2) 3D 효과 적용

 

* 핵심속성

perspective: 600px;
perspective는 원근감 효과를 줄수 있는 속성이고, 전체를 감싸고 있는 section인 부모가 이 속성을 가져야만 입체적으로 돌아가는 느낌을 낼 수가 있다. 값이 작아질수록 과하게 움직이면서 뒤집힌 형태가 된다.

transform-style: preserve-3d;
뒤집혀야 하는 대상들이 3차원 공간값을 줘야만 뒤에 이미지를 보여지게 할 수 있다.

backface-visibility: hidden;
front와 back이 갖고 있는 기존의 뒷면들을 안보이게 처리할 수 있다. 이렇게 처리해야만 두장이 겹쳐졌을때 다른 태그의 면적을 보여지게 할 수 있다. 

section {
    width: 100vw;
    height:100vh;
    background: indianred;
    position: relative;
    perspective: 600px; /* 원근감 느낌을 줄 수 있음*/
}

.card {
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    height:400px;
    width: 300px;
    transition:all 1s;
    transform-style: preserve-3d; /*3차원 공간이 만들어져야 호버했을 떄 뒤의 이미지를 보이게 할 수 있다*/
}

.card:hover {
    transform: translate(-50%,-50%) rotateY(180deg); /*호버했을 떄 카드 자체를 돌려준다.*/
}

.card > div {
    height:100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top:0;
    backface-visibility: hidden; /*뒤집혔을떄의 각자의 기존 뒷면이 안보이도록 처리*/
}

.card .front {
    background: beige;
    z-index: 9999;
}

.card .back {
    background: orange;
    transform:rotateY(180deg); /* 기본 셋팅으로 돌려놔야 한다.*/
}

이렇게 적용하면

완성!

 

 

내가 이해한게 맞을지 모르겠지만...ㅎ