[css] transform을 이용해 뒤집는 애니메이션 만들기

안녕하세요. 플입니다.

오늘은 css를 이용해 애니메이션 효과를 넣어볼게요.

 

---

 1.  html 

<li>
<section class="front">
   <h4>Q. 이름의 의미</h4>
   <p> 
      A. 이름은 색과 연관지어서 지었어요.
      <span>시트렛은 시트러스색보다는 형광색에 가깝지만</span>
      <span>시트러스 + rat(쥐) 조합이 마음에 들었죠.</span>
      <span>블루는 정말 단순한 작명이라고 생각하고는 있어요.</span>
   </p>
</section>
<section class="back">
   <h4>Q.1</h4>
</section>
</li>

 

뒤집는 애니메이션을 만들 때 중요한 포인트는

앞쪽과 뒤쪽을 모두 만들어주는 것이에요. 

 

일단 한글로 적힌 내용은 신경 쓰지 말아 주시고 <section>에 넣은 클래스를 주목해주세요.

front와 back로 앞뒤를 구분해주었어요.

 

이게 뒷면

 

이게 앞면이에요.

 

기본은 뒷면인 상태로 나오고 마우스를 올리면 앞면이 나오도록 만들 거예요.

---

 2.  포지션

li{ position:relative; }
.front{ position:absolute; }
.back{ position:absolute; }

디자인을 위한 css 태그들은 생략하고 진행할게요. 참고해주세요~

 

먼저 포지션을 이용해 띄워줄게요. z-index를 넣어야 하거든요.

전체를 감싸고 있는 태그에 position:relative;를 넣어주세요. 그리고 각각 앞면과 뒷면에 absolute를 적용시켜주세요.

 

li{ position:relative; }
.front{ position:absolute; z-index:1; }
.back{ position:absolute; z-index:2; }

 

포지션을 넣어주셨다면 z-index로 순서를 정해주세요. 뒷면에 높은 숫자를 입력해주세요. 

평소에는 뒷면이 보여야 하기 때문이죠. 높은 숫자가 위쪽에 있는 거예요!

---

 3.  뒤집어두기

.front{ transform: rotateY(180deg); }
.back{ transform: rotateY(0deg); }

transform을 이용해서 앞면을 일단 뒤집어주세요. 뒷면도 기본으로 설정해주세요.

 

rotate는 돌린다는 의미고 Y는 y축을 의미해요. 즉, 세로 방향으로 돌린다는 말이에요.

앞면에 설정된 숫자를 보면 180이죠. 180도라는 의미예요. 반대로 뒤집는다는 의미에요.

좌우로 뒤집힌 모양이 된다면 성공이에요.

 

뒷면이 위쪽에 있어서 뒤집힌 모양이 안보이신다면 z-index를 잠시 바꿔서 확인해보세요~

 

 

---

 4.  transform-style

li{ transform-style: preserve-3d; transition: all 1s; }

다음은 <li> 즉 전체를 감싸고 있는 태그에 transform-style을 설정해주세요.

값은 preserve-3d라고 입력해주시면 됩니다. 뒤쪽을 보시면 눈치채셨겠지만 3d 효과를 주는 스타일이에요.

말하자면 z 축이 생긴다고 생각해주시면 됩니다. 

 

뒤집는 모양이 보이려면 원근감이 있어야 하잖아요? 그걸 준다고 생각해주세요.

 

그리고 속도를 지정해줍니다.

transition: all 1s; 모두 1초 동안 움직인다고 설정해주세요.

 

---

 5.  hover

li:hover{ transform: rotateY(180deg);}

이제 대망의 마지막 hover를 넣어줄 거예요. 마우스를 올리면 뒤집는 효과를 줄 것이니까 hover를 줍니다.

그 hover를 어디에 주느냐 전체를 감싸고 있는 <li> 태그에 넣어주세요. 전체를 한 번에 뒤집는 느낌이에요.

 

li{ position:relative; transform-style: preserve-3d; transition: all 1s; }
li:hover{ transform: rotateY(180deg);}

.front{ position:absolute; transform: rotateY(180deg); z-index: 1; }
.back{ position:absolute; transform: rotateY(0deg); z-index: 2; }

어떠신가요? 애니메이션 효과를 잘 구현하셨나요? 전체 css 코드도 같이 올려둘게요.

 

 

https://ssimplay.github.io/shinedrop/

shine drop

실제 구현되는 효과는 이쪽 홈페이지에서 확인 가능합니다~

 

질문이나 다른 궁금한 것이 있다면 댓글 남겨주세요~!

 

---

그럼 이만.

총총.