CSS Hover Flip 애니메이션 - 2

CSS Flip 애니메이션 - 2

마우스 오버시 아래와 같이 뒤집어져
뒷면에 있는 콘텐츠가 보이는 애니메이션을 css로 만들어 보았다.
엄청 간단하게 구현 가능하다.

앞면

뒷면

구현하기

먼저 아래와 같이 기본 레이아웃을 잡아주자
뒤집을 요소와 그 요소를 감싸는 부모 요소가 있어야한다.
뒤집을 요소안에 앞,뒷면을 나누고 그 안에 원하는 콘텐츠를 넣으면 된다.

<div class="flip-box">
    <div class="flip">
        <div class="front">앞면</div>
        <div class="back">뒷면</div>
    </div>
</div>

이제 스타일을 지정해주자.

flip-box의 css는 다음과 같다.
가로 세로 사이즈는 원하는대로 지정하면 된다.
여기서 투영점 perspective는 3D를 위한 속성이다.
쉽게말해 원근감이라고 생각하고 적당히 조절해보자

.flip-box {
    width: 300px;
    height: 400px;
    perspective: 1000px;
}

다음은 뒤집을 요소의 css 지정이다.
앞면과 뒷면을 absolute 겹쳐주어야 하기 때문에 relative를 지정 해야 한다.
3D 효과 사용 시 transform-style를 preserve-3d로 지정해 주어야 사용가능 하며
애니메이션 효과를 위해 transform: rotateY(0deg)로 미리 지정한다

.flip {
    width: 100%;
    height: 100%;
    position: relative;
    color: white;
    text-align: center;
    line-height: 400px;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: .5s;
}

이번에는 front와 back 공통 css를 지정한다.
absolute를 사용해 두 면을 겹쳐준다.
겹쳤을 시 뒤집혀있는 면이 보이기 때문에
backface-visibility를 hidden으로 지정해 주어야
뒤집혀 있는 면이 보이지 않는다.

.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

front와 back을 대충 구분 가능하게 스타일 지정을 해준다.
이때 뒷면은 뒤집혀 있는 상태에서 호버시에 원상태로 돌아와야 하기 때문에
rotateY를 사용해 미리 뒤집어 준다.

.front {
    background: skyblue;
}

.back {
    background: orange;
    transform: rotateY(180deg);
}

마지막으로 호버시 돌려주기만 하면 끝이다!!

.flip-box:hover .flip {
    transform: rotateY(-180deg);
}

결과물

아래와 같이 호버시 뒤집히면 성공

앞면

뒷면

- 끝 -