● 2차원 확대 또는 축소하기

scaleX() 함수는 요소를 x축 방향으로 확대하거나 축소할 수 있습니다. 예를 들어, 요소를 x축 방향으로 2배 확대하고 싶다면 다음과 같이 코드를 작성합니다. 만약 숫자를 0.2처럼 0보다 크고 1보다 작은 소수점을 적으면 요소 크기가 축소됩니다.

div:hover{ 
  /* x축 방향으로 2배 확대 */
  transform:scaleX(2);
}

그림 6-79 실행결과

방향을 바꿔 y축 방향으로 2배 확대하고 싶다면 scaleY() 함수를 사용합니다.

div:hover{
  /* y축 방향으로 2배 확대 */
  transform:scaleY(2);
}

그림 6-80 실행결과