기초 동적 효과, Transform & Transition

transform은 요소의 형태나 위치를 변형하는 속성이다.
transition은 속성 값이 변할 때 부드럽게 전환되도록 애니메이션을 추가하는 속성이다.
두 속성을 함께 사용하면 자연스러운 인터랙션 효과를 만들 수 있다.

Transform

요소를 이동, 확대·축소, 회전, 기울이기 등 시각적으로 변형한다.
실제 문서 흐름에는 영향을 주지 않는다.

① translate

요소를 x축, y축으로 이동한다.


.box {
  transform: translateX(20px);   /* 오른쪽으로 20px */
  transform: translateY(-10px);  /* 위쪽으로 10px */
  transform: translate(20px, -10px); /* x, y 동시 */
}

② scale

요소를 확대하거나 축소한다. 1이 원래 크기이다.


.box {
  transform: scale(1.2);      /* 1.2배 확대 */
  transform: scale(0.8);      /* 0.8배 축소 */
  transform: scaleX(1.5);     /* 가로만 1.5배 */
  transform: scaleY(0.5);     /* 세로만 0.5배 */
}

③ rotate

요소를 회전한다. 양수면 시계 방향, 음수면 반시계 방향이다.


.box {
  transform: rotate(45deg);   /* 시계 방향 45도 */
  transform: rotate(-90deg);  /* 반시계 방향 90도 */
}

④ skew

요소를 기울인다.


.box {
  transform: skewX(20deg);  /* x축 기준 기울이기 */
  transform: skewY(10deg);  /* y축 기준 기울이기 */
}

여러 transform 동시 적용

공백으로 구분해 여러 transform을 한 번에 적용할 수 있다.


.box {
  transform: translateY(-10px) scale(1.1) rotate(5deg);
}

여러 transform을 적용할 때 순서에 따라 결과가 달라질 수 있다.

자주 사용하는 transform 패턴 (중앙정렬)

요소를 부모 컨테이너의 정중앙에 배치할 때 유용하게 사용된다.


.box-parenet {
  position: relative;
  width: 300px;
  height: 300px;
}
 
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 요소 너비/높이의 50%만큼 역방향 이동 */
  transform: translate(-50%, -50%);
  
  width: 100px;
  height: 100px;
  background-color: #3b82f6;
}

Transition

CSS 속성이 변할 때 즉시 바뀌지 않고 지정한 시간 동안 부드럽게 전환된다.


.box {
  transition-property: transform;  /* 전환할 속성 */
  transition-duration: 0.3s;       /* 전환 시간 */
  transition-timing-function: ease; /* 가속 곡선 */
  transition-delay: 0s;             /* 시작 전 대기 시간 */
}

② transition 단축 속성

속성 시간 timing-function delay 순서로 작성한다.


.box {
  /* 단일 속성 */
  transition: transform 0.3s ease;
 
  /* 여러 속성 — 쉼표로 구분 */
  transition:
    transform 0.3s ease,
    background 0.2s ease-in,
    opacity 0.4s ease-out;
 
  /* 모든 속성 */
  transition: all 0.3s ease;
}

all은 편리하지만 불필요한 속성까지 감시하므로 성능에 영향을 줄 수 있다.
변화가 필요한 속성만 명시하는 것을 권장한다.

③ timing-function

전환의 속도 변화 패턴을 지정한다.

값	설명
`ease`	기본값. 천천히 시작, 빠르게, 천천히 끝
`linear`	일정한 속도
`ease-in`	천천히 시작
`ease-out`	천천히 끝
`ease-in-out`	천천히 시작, 천천히 끝
`cubic-bezier(x1,y1,x2,y2)`	커스텀 곡선


.box {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 살짝 튀어오르는 효과 */
}