Simple Is Best

33. [CSS] CSS animation - 4 / 카드 뒤집기 구현 본문

HTML & CSS

33. [CSS] CSS animation - 4 / 카드 뒤집기 구현

데이터미널 2021. 7. 20. 10:58

안녕하세요. 이번 포스팅에서는 카드 뒤집는 애니메이션에 대해서 구현해보도록 하겠습니다. 

 

어떻게 동작하는지 먼저 알아볼까요? 

 

#1. hover 이전

#2. hover 할 때 애니메이션 진행 (뒤집히는 중)

3. hover 할 때, 애니메이션 진행 (뒤집힘)

4. hover를 멈추면 다시 1번으로 돌아감

 

오늘 위에 해당하는 애니메이션을 구현해보도록 하겠습니다. 

 

1. transform : rotateY( ); 

카드를 뒤집었을때의 "반갑습니다." 문구를 정확하게 보이게 하려면 어떻게 해야할까요?

우선 카드 앞면에서 쓰여질 글을 Y축을 기준으로 180도 돌려야 합니다.

이걸 Y축을 기준으로 돌리면 '반갑습니다'가 나오겠죠?

뒷면의 결과에 '반갑습니다'가 나오게 하기 위해서는 transform : rotateY(180deg)를 사용하고 카드를 hover하면 다시 transform : rotateY(180deg) 를 다시 적용 시키면 됩니다. 

 

2. transform-style : preserve-3d;

앞면은 아까 하늘색 카드였는데 여전히 오렌지색 '반갑습니다' 카드가 나오는 현상은 아주 자연스러운 현상입니다. 

앞면과 뒷면을 겹치게 하기 위해서 position : absolute ; 를 사용하였기 때문입니다. 

그럼 앞면에서 뒷면이 안나오게 하려면 어떻게 하면 될까요? 

 

카드를 감싸고 있는 상위 부모 태그에 transform-style : preserve-3d ; 속성을 부여하면 됩니다. 

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

이는 변경 스타일을 3d 처럼 적용해준다는 의미입니다. 

다음 그림과 같이 앞면과 뒷면이 분리되었음을 확인 할 수 있습니다. 

 

3. backface-visibility : hidden; 

만약, 뒷면으로 뒤집었을 때 앞면이 보인다면 backface-visibility : hidden; 속성을 앞면을 담당하는 클래스에 적용시키면 됩니다. 

 

HTML

<html>
    <head>
        <title>card</title>
        <link rel="stylesheet" href="./card.css">
        <meta charset='utf-8'>
    </head>
    <body>
        <div class="outer"> <!--outer는 레이아웃 전용-->
            <div class="inner"> <!--inner는 hover 전용-->
                <div class='front'>뒤집어 보실래요?</div>
                <div class='back'>
                <h4>반갑습니다.</h4>
                </div>
            </div>
        </div>
    </body>
</html>

 

 

CSS

.outer {
    width : 200px;
    height : 400px;
    margin : auto;
}

.inner {
   width : 100%; 
    height : 100%;
    position : relative;
    transition: all 1s;
    transform-style: preserve-3d;
/*    실제 3d box 처럼 보이게끔 설계, hover하지 않았을 때, 뒷면이 안보이게끔 해준다. */
}

.inner:hover{
    transform : rotateY(180deg);
}

.front {
    width : 100%; 
    height : 100%;
    position : absolute;
    backface-visibility: hidden; /*카드의 뒷면에서 이미지(앞면)가 안보이게 처리*/
    background-color: deepskyblue;
    text-align: center;
    padding-top: 80%;
    box-sizing: border-box;
}



.back {
    width : 100%; 
    text-align: center;
    position : absolute;
    transform: rotateY(180deg); /*글씨를 미리 180도 돌려놓는다.*/
    height : 100%;
    background-color: darkorange;
    padding-top: 80%;
    box-sizing: border-box;
}
저작자표시

'HTML & CSS' 카테고리의 다른 글

32. [CSS] position : sticky  (0) 2021.07.19
30. [CSS] CSS Animation - 3  (0) 2021.07.18
29. [HTML] 비디오 배경 넣기  (0) 2021.07.17
28. [SCSS] SCSS 핵심 문법  (0) 2021.07.15
27. [CSS] SCSS 설치 및 기초  (0) 2021.07.15
'HTML & CSS' Related Articles more