translate : 이동

단위 : px, %

기본 값 : px = 엘리먼트 기본 크기 / % = 100%

• .box:hover {

  transform: translateX(0px);

  }

  Result

• .box:hover {

  transform: translateY(0px);

  }

  Result

• .box:hover {

  transform: translate(0px, 0px);

  }

  Result

scale : 크기

단위 : 없음 / 기본 값 : 1

• .box:hover {

  transform: scaleX(0);

  }

  Result

• .box:hover {

  transform: scaleY(0);

  }

  Result

• .box:hover {

  transform: scale(0, 0);

  }

  Result

rotate : 회전

단위 : deg / 기본 값 : 0deg

• .box:hover {

  transform: rotate(0deg);

  }

  Result

• .box:hover {

  transform: rotate(0deg);

  }

  Result

skew : 기울기

단위 : deg / 기본 값 : 0deg

• .box:hover {

  transform: skewX(0deg);

  }

  Result

• .box:hover {

  transform: skewY(0deg);

  }

  Result

• .box:hover {

  transform: skew(0deg, 0deg);

  }

  Result

matrix

너비, 수직기울기, 수평기울기, 높이, 수평이동, 수직이동

• .box:hover {

  transform: matrix(0, 0, 0, 0, 0, 0);

  }

  Result

Matrix 부가설명

너비(scaleX)와 높이(scaleY)는 0부터 9까지의 수치를 사용합니다. 1은 기본 값, 2는 두 배, 0.5는 절반이다. 음수는 사용할 수 없습니다.

매트릭스에서의 기울기는 skew() 함수를 쓰지 않고 tan() 함수를 사용하며, 0부터 9까지의 수치로 표현합니다.

이동(trnaslate)은 픽셀 단위를 사용하는데, 단위명은 쓰지 않습니다. 따라서 100px을 이동시키려고 한다면 그냥 100이라고 적어야 합니다. 다른 단위를 사용하려면 매트릭스를 사용하지 않아야 합니다. 음수 사용이 가능하며, 반대방향을 의미합니다.