애니메이션과 3D관련 속성을 이용한 간단한 동작구현

오늘은 CSS로 3D animation을 구현하는 방법을 공부했다.

transform의 여러 속성들과 animation 관련 속성들로

이런 결과물을 만들어 냈다.

N장의 이미지가 원통 모양으로 배치되어 회전하는 구조 

원의 둘레 = 이미지의 너비 * 이미지 갯수
원의 반지름 = 원의 둘레 / (2 * 3.14)
각 이미지 사이의 각도 =  (360 / 이미지 갯수 ) * N

 

처음에 너무 많은 속성들을 한번에 공부해서 어떤 속성을 배웠는지 가물가물했다.

그래도 각 속성들을 이해하고 도움없이 다시 처음부터 만들어보는 작업을 하고나니 머릿속에 정리가 잘된거같다.

 

일단 위 공식을 이용해야한다.

 

wrapper(할아버지)

    item-container(부모님)
        item1(자식)

            img

        ......

 

html 구조는 이렇게 작성하였다.

 

 

 

 

 

 

 

 

 

 

## 구현 방법(핵심부분 위주로 작성)

1. 일단 부모의 중심점을 잡기위해 display: flex를 주고

justify-content:center로 중심을 잡는다.

중심점을 잡지 않으면 원하는 결과가 나오지 않는다.

 

2. 자식들에 transform의 rotateY와 translateZ에 위에서 본 공식값을 대입한다.

rotateY는 제자리에서 Y축 기준으로 회전을 할 수 있게 해준다.

translateZ는 원근감을 주는 요소인데 Z축으로 이동하게 해준다.

일단 rotateY에 위에서 본 공식을 이용하여 각 이미지 사이의 각도를 구한다.

그리고 translateZ도 위 공식을 이용하면된다.(원의 반지름)

 

3. 정렬된 이미지들을 position:absolute를 이용해서 이미지들을 겹치도록 만든다.

 

4. 그리고 할아버지에 perspective:값을 준다.

이 속성은 할아버지가 3D 공간을 볼수있게 해주면서 3D 공간을 부모에게 전달하는 역할을 한다.

 

5. 부모에 transform-style: preserve-3d를 주어 부모의 3D 공간을 자식에게 그대로 전달하도록 한다.

여기까지 하면 움직이진 않지만 원형으로 자식들이 자리잡은걸 볼 수 있다.

 

6. 요소를 움직이기 위해선 @keyframe을 이용하여 transform:rotateY(360deg)를 설정하고

 

7. container에 animation: rotate 7s linear infinite를 설정하면 된다.

rotate는 정의한 keyframe을 적은거고 linear는 일정한 속도로 진행시키기위한거고 infinite는 계속 돌게하기 위한거다.

 

그리고 위에서 보는 시점과 아래서 보는 시점은 perspective-origin:x y 를 이용하면된다.

 

이해하면 참 쉬운데... 처음에 머릿속에 여러 퍼즐조각들이 있어서 앞이 너무 막막했다 그래도 하나씩 하다보니 이해할 수 있게 된거같다.