css Transform

transform 프로퍼티는 요소를 변형(이동, 회전, 확대/축소, 기울이기)할 때 사용됩니다.

1. 2D 변환

translate(x, y)

• 요소를 x축, y축으로 이동
• translate(50px, 100px) → x축 50px, y축 100px 이동
• translateX(50px), translateY(100px)도 개별 사용 가능

scale(x, y)

• 요소를 x축, y축 기준으로 확대/축소
• scale(1.5, 2) → x축 1.5배, y축 2배 확대
• scaleX(1.5), scaleY(2) 도 개별 사용 가능

rotate(angle)

• 요소를 시계 방향으로 회전 (단위: deg, rad, turn)
• rotate(45deg), rotate(0.5turn)

skew(x-angle, y-angle)

• 요소를 기울이기 (단위: deg)
• skew(20deg, 10deg) → x축 20도, y축 10도 기울이기
• skewX(20deg), skewY(10deg)도 개별 사용 가능

matrix(a, b, c, d, e, f)

• 변환을 행렬로 표현 (a, b, c, d는 변형 요소, e, f는 이동 값)
• matrix(1, 0, 0, 1, 50, 100) → translate(50px, 100px)과 동일

2. 3D 변환

translate3d(x, y, z)

• 요소를 3D 공간에서 이동
• translate3d(50px, 100px, 200px)
• translateZ(200px) → z축 방향으로 이동

scale3d(x, y, z)

• 요소를 x, y, z 축으로 확대/축소
• scale3d(1.5, 2, 0.5)

rotate3d(x, y, z, angle)

• 지정된 축을 중심으로 회전
• rotate3d(1, 0, 0, 45deg) → x축을 기준으로 45도 회전

perspective(n)

• 원근감을 적용 (n은 거리, px 단위)
• perspective(500px)

.box {
  transform: perspective(500px) rotateY(45deg);
}

• 개별 요소에 적용

.container {
  perspective: 800px;
}
.box {
  transform: rotateY(45deg);
}

• 부모 요소에 적용 (perspective를 단독 프로퍼티로 설정)

3. backface-visibility

backface-visibility는 3D 변환 시 요소의 뒷면을 보이게 할지 여부를 설정합니다.

• visible → 뒷면이 보이도록 설정 (기본값)
• hidden → 뒷면이 보이지 않도록 설정

.card {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}