CSS3를 이용한 역동적인 웹페이지 만들기 - Transition & Transform

앞으로 CSS3가 향후 어떤 방향으로 나아갈지, 어떤 모듈을 포함할지에 대한 로드맵은 이미 정해져 있으며, 이미 많은 모듈이 최신 브라우저에 구현이 되어있다.

그 중 Webkit에서 구현이 된 Transition과 Transform이 웹페이지에서 어떻게 응용이 될 수 있는지 간단하게 볼 수 있는 웹페이지가 있어서 소개하고자 한다. Webkit엔진을 채용한 Safari나 Chrome에서 봐야한다.

Demo 보기 : http://webkit.org/demos/transitions-and-transforms/

메뉴에 마우스를 올려보면 메뉴가 부드럽게 커지는 것을 볼 수 있다. 이것은 순전히 CSS만으로 Transition의 duration속성을 이용하여 움직이는 시간을 주고 Transform의 scale 속성으로 크기를 키운 것이다.

메뉴를 누르면 나오는 썸네일(모니터) 이미지도 원형은 기울어지지 않았음에도 웹페이지에서는 기울어져 보인다. 이것 또한 Transform의 rotate 속성을 이용하여 기울인 것이다. 

다른 메뉴를 누를 때 썸네일 이미지가 서서히 바뀌는 듯한 느낌도 Transition의 duration속성을 이용했다.

-webkit-transition-duration: 250ms;
-webkit-transform: scale(1.2);
-webkit-transform: rotate(-5deg);

이 외에도 주목할만한 CSS 효과가 있다.

둥근 테두리, 반투명도 CSS만을 이용하여 표현했으며

창의 크기를 늘렸다 줄였다 해도 배경이미지가 가로, 세로 100%를 유지한다.

이전까지는 Javascript로 함수를 만들어 역동적인 웹페이지를 만들어 왔다. 앞으로 CSS3를 통해 표현만을 위한 Javascript는 많이 줄어들기를 기대해본다.