preserve-3d1 [CSS] CSS3 이용하기 03 (170411) CSS3 이용하기 03 CSS3를 이용한 3D Cube 만들기- 6장의 사진을 모두 겹친다. - 각각의 이미지 요소를 축에 맞추어 이동시킨다.- 첫 번째를 예로 들자면 Z축으로 200px 이동한다.- 두 번째 이미지는 Y축을 기준으로 90도 회전 후 200px을 이동한다.- 이런 식으로 회전과 이동을 해준다.- wrapper를 기준으로 Z축으로 200px이 튀어나와보이기 때문에 큐브 전체를 창에 맞춰 보이도록 -200px을 해준다. (이렇게 하는 이유는 컨텐츠를 가릴 수도 있기 때문에 해주는 것이다) ** 출력 결과 ** 버튼에 따라 상하좌우 이동하도록 만들기- jquery를 이용하여 만든다.- 기준을 만들어 더하고 뺀다. ** 출력 결과 ** Animation 이용하기- animation-name : .. 2017. 4. 11. 이전 1 다음
