[CSS] CSS3 이용하기 03 (170411)

 CSS3 이용하기 03 

• CSS3를 이용한 3D Cube 만들기

- 6장의 사진을 모두 겹친다.      

- 각각의 이미지 요소를 축에 맞추어 이동시킨다.

- 첫 번째를 예로 들자면 Z축으로 200px 이동한다.

- 두 번째 이미지는 Y축을 기준으로 90도 회전 후 200px을 이동한다.

- 이런 식으로 회전과 이동을 해준다.

- wrapper를 기준으로 Z축으로 200px이 튀어나와보이기 때문에 큐브 전체를 창에 맞춰 보이도록 -200px을 해준다. (이렇게 하는 이유는 컨텐츠를 가릴 수도 있기 때문에 해주는 것이다)

** 출력 결과 **

• 버튼에 따라 상하좌우 이동하도록 만들기

- jquery를 이용하여 만든다.

- 기준을 만들어 더하고 뺀다.

** 출력 결과 **

• Animation 이용하기

- animation-name : guraAni;    : 적용할 키프레임 이름

- animation-duration : 2s;    : 적용 시간

- animation-iteration-count : infinite/숫자    : 반복 횟수

- animation-timing-function: ease-in/ease-out/ease-in-out/linear;    : 타이밍 함수

- animation-direction: alternate/nomal/reverse;     : 진행 방향

- @keyframes 애니메이션명{    } : keyframes를 이용하여 애니메이션을 만든다.

** 출력 결과 **

• 좌우로 흔드는 애니메이션 만들기

** 출력 결과 **

• 애니메이션 반복 실행 시키기

** 출력 결과 **