rotate 2

[CSS3] transition : CSS 속성의 변화 값을 일정한 시간 동안 모션으로 전환 효과 주기

CSS3를 처음 접하는 사람들에게 CSS3에서 가장 신기한 기능이 무엇인지 물어본다면 아마 대부분 사람들은 transition을 꼽을 것입니다. 그도 그럴것이 기존의 웹 환경에서 플래시를 사용하지 않고 모션 효과를 주기 위해서는 복잡한 JavaScript의 코드를 일일이 작성해야 했습니다. 그러나 CSS3의 transition을 사용하면 누구나 간단한 설정만으로도 직관적인 모션을 제작할 수 있고 그 효과 또한 탁월하기 때문입니다. 이번에는 CSS3의 꽃이라고 할 수 있는 transition, 즉 전환 효과에 대해 배워보도록 하겠습니다. transition의 기본 구분은 다음과 같습니다. (1) transition : 속성명 전환시간 가속도 설정 지연시간; ※ transition은 보통 가상 선택자 :ho..

[CSS3] transform(2d변형) : 특정 요소의 모양을 평면상에서 자유롭게 변형하기

기존 웹 표준에서 모든 HTML 요소의 모양은 사각형이었으며 해당 모양을 변형할 수 있는 방법이 없었지만 CSS3으로 넘어오면서 포토샵의 기능과 비슷한 변형 속성이 대거 추가되었습니다. 따라서 기존에는 불가능하던 다양한 디자인 기법이 순수 CSS 기술만으로도 구현이 가능해졌습니다. 이러한 CSS3 기능의 추가는 jQuery와의 결합을 통해 더욱 역동적이고 인터랙티브한 웹 사이트 제작을 도와줍니다. 여기서는 transform의 속성 중 평면상에서 구현가능한 기능들을 위주로 학습하겠습니다. transform의 경우에는 속성도 다양하고 표기법이 다소 익숙하지 않을 수 있으니 해당 예제를 차분히 따라 해보면서 천천히 눈에 익히기 바랍니다. (1) translate : x축이나 y축으로 이동 translate는 ..