transform3 [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. [CSS] CSS3 이용하기 02 (170410) CSS3 이용하기 02 3D Transform- perspective :컨텐츠와 내 시선 사이의 거리 (wrapper 요소)- perspective-origin: 50% 50% ; 시선의 위치 결정 (wrapper 요소)- transform-style : preserve-3d ; 3d transform을 하겠다고 선언- transform-origin : 50% 0%; x, y, z축이 만나는 원점 설정 (x% y%) ** 출력 결과 ** CSS3를 이용한 카드 뒤집기 ** 출력 결과 ** 버튼 클릭하면 뒤집어지는 카드 ** 출력 결과 ** 2017. 4. 10. [CSS] CSS3 이용하기 (170410) CSS3 이용하기 CSS3는 IE9이상에서 이용이 가능하다. BorderRadius 속성 이용하기- 모서리 부분을 반지름으로 잡아 둥글게 해주는 기능 ** 실행 결과 ** Transition 이용하기- transition 속성에는 property(background-color, width, height 등), duration, timing-function이 있다.- 여러 개의 적용이 필요하면 all을 이용한다.- transition1 ** 출력 결과 ** - 더 자세한 결과는 css3 > Step02_Transition2.html, 참고 - transition2 ** 출력 결과 ** - transition3- 5초 안에 종료되지만 각자 속도가 다 다르다. ** 출력 결과 ** transform - tra.. 2017. 4. 10. 이전 1 다음
