transform

• 요소에 이동, 회전, 확대, 축소, 기울이기, 비틀기 등의 애니메이션을 적용시킬 수 있다

• 각 속성들을 구분하여 한꺼번에 적용 가능

translate : 요소 이동시키기

rotate : 요소 회전시키기

scale : 요소 확대, 축소시키기

skew : 요소 기울이기, 비틀기

martix : translate, rotate, scale, skew를 행렬로 표시하고 행렬의 곱을 결과로 적용

😄 code 1. 요소 이동, 회전, 확대, 축소

/*HTML*/
<div class="box"></div>

/*CSS*/
.box {
  width: 100px;
  height: 100px;
  background-color: black;
  /*x축으로 150px, y축으로 150px만큼 이동*/
  transform: translate(150px, 150px);
  /*x축으로만 150px 이동*/
  transform: translateX(150px);
  /*y축으로만 150px 이동*/
  transform: translateY(150px);
  /*요소 크기의 50%만큼 x축, y축으로 이동*/
  transform: translate(50%, 50%);
  /*요소를 100도만큼 회전*/
  transform: rotate(100deg);
  /*요소 크기를 가로 3배, 세로 4배만큼 확대*/
  transform: scale(3, 4);
}

• translate(50%, 50%)는 부모 크기가 아닌 요소 자신의 크기의 50%만큼 이동한다. 위의 코드에서 요소의 크기는 100px이므로 50%인 50px만큼 이동한다

• rotate()는 지정한 각도만큼 시계 방향으로 회전한다

• scale()은 1보다 큰 수는 확대하고 1보다 작은 수는 축소한다

😄 code 2. 요소 기울이기, 비틀기, matrix

/*HTML*/
<div class="box"></div>

/*CSS*/
.box {
  width: 100px;
  height: 100px;
  background-color: black;
  /*x축은 우측으로 50도, y축은 상단으로 30도만큼 기울이기*/	
  transform: skew(50deg, -30deg);
  /*아래 설명 참고*/
  transform: matrix(2, 1, -1, 1.5, 30, -45);
}

• skew()는 x축의 +는 우측으로, -는 좌측으로 기울인다

  • skew()는 y축의 +는 하단으로, -는 상단으로 기울인다

  • 단위로는 deg(각도 도단위), rad(각도 라디안), grad(각도 그레이드), turn(각도 회전의 수) 등을 사용할 수 있다

• matrix(a, b, c, d, e, f)에서 a는 scaleX(), b는 skewY, c는 skewX, d는 scaleY, e는 translateX, f는 translateY를 나타낸다

  • 결과는 행렬의 곱으로 나오며 일반적으로 사용하기에는 난이도가 있고 직관적이지가 않아 사용시 주의가 필요하다

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍