transform: scale / transform: rotateX, rotateY

1. transform: scale 과 transform: rotateX 정의

transform은 회전, 크기, 이동, 기울이기와 관련된 다양한 동작이 가능하다. 

간단한 div box안에 이미지 소스를 확대 시키려면 transform:scale 을 이용하면 된다.

2. 사용방법

1) scale : 크기를 작게 또는 크게 변경하기

<style type="text/css">
/* 2배 확대하는 경우 */
   -ms-transform: scale(2); // IE 9 이상에서 사용
   -webkit-transform: scale(2); // 사파리, 크롬, 오페라 브라우저 사용
   transform: scale(2);

/* 가로방향으로 2배 확대하는 경우 */
   -ms-transform: scaleX(2); // IE 9 이상에서 사용
   -webkit-transform: scaleX(2); // 사파리, 크롬, 오페라 브라우저 사용
   transform: scaleX(2);

/* 세로방향으로 2배 확대하는 경우 */
   -ms-transform: scaleY(2); // IE 9 이상에서 사용
   -webkit-transform: scaleY(2); // 사파리, 크롬, 오페라 브라우저 사용
   transform: scaleY(2);
</style>

2) rotate : 회전 효과 적용하기

<style type="text/css">
/* 시계 방향으로 90도 회전하는 경우 */
   -ms-transform: rotate(90deg); // IE 9 이상에서 사용
   -webkit-transform: rotate(90deg); // 사파리, 크롬, 오페라 브라우저 사용
   transform: rotate(90deg);

/* X축을 기준으로 90도 회전하는 경우 */
   -ms-transform: rotateX(90deg); // IE 9 이상에서 사용
   -webkit-transform: rotateX(90deg); // 사파리, 크롬, 오페라 브라우저 사용
   transform: rotateY(90deg);

/* Y축을 기준으로 90도 회전하는 경우 */
   -ms-transform: rotateY(90deg); // IE 9 이상에서 사용
   -webkit-transform: rotateY(90deg); // 사파리, 크롬, 오페라 브라우저 사용
   transform: rotateY(90deg);

/* Z축을 기준으로 90도 회전하는 경우 */
   -ms-transform: rotateZ(90deg); // IE 9 이상에서 사용
   -webkit-transform: rotateZ(90deg); // 사파리, 크롬, 오페라 브라우저 사용
   transform: rotateZ(90deg);
</style>

4. 결론

CSS를 사용하여 다양한 시각적 효과, 애니메이션을 구현할 수 있다. 

그런데 익스플로러(IE)나 웹킷 엔진의 사파리, 크롬, 오페라등의 브라우저에서 사용하기 위해서 -ms-, -webkit- 등을 css 속성 앞에 꼭 써주어야 한다.