WeniVooks

검색

HTML/CSS 에센셜

transform

1. CSS transform

transform 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 적용할 수 있게 해줍니다. 이 속성을 사용하면 요소의 형태와 위치를 동적으로 변경할 수 있습니다.

1.1 translate() - 이동

translate() 함수는 요소를 현재 위치에서 지정된 거리만큼 이동시킵니다.

transform: translate(50px, 100px); /*오른쪽으로 50px, 아래로 100px 이동 */
transform: translate(-20px, 0); /* 왼쪽으로 20px 이동 (세로 위치 변화 없음) */
transform: translateX(30%); /* 요소 너비의 30% 만큼 오른쪽으로 이동 */
transform: translateY(-50px); /* 위로 50px 이동 */
transform: translate(50px, 100px); /*오른쪽으로 50px, 아래로 100px 이동 */
transform: translate(-20px, 0); /* 왼쪽으로 20px 이동 (세로 위치 변화 없음) */
transform: translateX(30%); /* 요소 너비의 30% 만큼 오른쪽으로 이동 */
transform: translateY(-50px); /* 위로 50px 이동 */

활용 팁

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

translate속성을 사용하면 요소를 자신의 크기의 절반만큼 왼쪽과 위로 이동시켜, 정중앙 정렬 효과를 낼 수 있습니다.

주의

translate()에서 % 단위는 요소 자신의 크기를 기준으로 이동 거리를 계산합니다. 이를 이용해 동적인 정렬이 가능합니다.

1.2 scale() - 크기 조절

scale() 함수는 요소의 크기를 조절합니다. 1보다 큰 값은 요소를 확대하고, 1보다 작은 값은 요소를 축소합니다.

transform: scale(2); /* 가로와 세로 모두 2배로 확대 */
transform: scale(0.5); /* 가로와 세로 모두 절반 크기로 축소 */
transform: scale(2, 1); /* 가로로만 2배 확대, 세로는 변화 없음 */
transform: scale(2); /* 가로와 세로 모두 2배로 확대 */
transform: scale(0.5); /* 가로와 세로 모두 절반 크기로 축소 */
transform: scale(2, 1); /* 가로로만 2배 확대, 세로는 변화 없음 */

팁

scale()은 요소의 내용물(텍스트 등)도 함께 확대/축소합니다. 이는 width와 height를 직접 변경하는 것과는 다른 효과를 줍니다.

1.3 rotate() - 회전

rotate() 함수는 요소를 지정된 각도만큼 회전시킵니다. 양수 값은 시계 방향, 음수 값은 반시계 방향으로 회전합니다.

transform: rotate(45deg); /* 시계 방향으로 45도 회전 */
transform: rotate(-90deg); /* 반시계 방향으로 90도 회전 */
transform: rotate(0.5turn); /* 시계 방향으로 반바퀴(180도) 회전 */
transform: rotate(45deg); /* 시계 방향으로 45도 회전 */
transform: rotate(-90deg); /* 반시계 방향으로 90도 회전 */
transform: rotate(0.5turn); /* 시계 방향으로 반바퀴(180도) 회전 */

참고

CSS는 각도 단위로 deg(도), rad(라디안), turn(회전) 등을 지원합니다.

1.4 skew() - 기울이기

skew() 함수는 요소를 X축이나 Y축을 기준으로 기울입니다.

/* X축을 기준으로 30도 기울임 */
transform: skew(30deg);
/* X축을 기준으로 20도, Y축을 기준으로 10도 기울임 */
transform: skew(20deg, 10deg);
/* X축을 기준으로만 45도 기울임 */
transform: skewX(45deg);
/* Y축을 기준으로 -15도 기울임 */
transform: skewY(-15deg);
/* X축을 기준으로 30도 기울임 */
transform: skew(30deg);
/* X축을 기준으로 20도, Y축을 기준으로 10도 기울임 */
transform: skew(20deg, 10deg);
/* X축을 기준으로만 45도 기울임 */
transform: skewX(45deg);
/* Y축을 기준으로 -15도 기울임 */
transform: skewY(-15deg);

주의

과도한 skew() 적용은 텍스트의 가독성을 해칠 수 있으므로 적절히 사용해야 합니다.

1.5 transform-origin

transform-origin 속성은 변형(transform)이 적용되는 기준점을 설정합니다. 이 속성은 모든 transform 함수(rotate, scale, skew, translate 등)에 영향을 줍니다. 기본값은 요소의 중심점(50% 50%)입니다. 값은 X축과 Y축을 기준으로 지정할 수 있으며, 선택적으로 Z축도 지정할 수 있습니다.

transform-origin: left top;
transform-origin: 0 0;
transform-origin: 100% 100%;
transform-origin: 50px 50px;
transform-origin: right bottom 10px; /* Z축 추가 */
transform-origin: left top;
transform-origin: 0 0;
transform-origin: 100% 100%;
transform-origin: 50px 50px;
transform-origin: right bottom 10px; /* Z축 추가 */
1.6 translate vs position

translate()와 position은 모두 요소를 이동시키는 데 사용될 수 있지만, 성능과 사용 목적에서 중요한 차이가 있습니다.

1.6.1 렌더링 과정의 차이

브라우저의 렌더링 과정을 간단히 설명하면 다음과 같습니다.

  1. Layout (Reflow): 요소의 크기와 위치 계산
  2. Paint: 색상, 이미지, 테두리 등을 그림
  3. Composite: 여러 레이어를 합성

position을 변경하면 Layout 단계부터 다시 시작됩니다. transform은 Composite 단계에서만 처리됩니다. 이로 인해 transform이 성능상 이점을 가집니다.

1.6.2 예제와 성능 비교

이 예제에서 두 박스는 시각적으로 동일하게 움직입니다. 하지만 내부적으로는 다르게 작동합니다.

  • translate 박스

    Composite 레이어에서만 변화가 일어납니다. 다른 요소의 레이아웃에 영향을 주지 않습니다.

  • position 박스

    Layout 단계부터 다시 계산이 시작됩니다. 주변 요소의 레이아웃에 영향을 줄 수 있습니다.

1.6.3 사용 지침

translate 사용 권장하는 경우

  • 애니메이션이나 빈번한 위치 변경이 필요할 때
  • 성능이 중요한 상황 (예: 모바일 환경)
  • 다른 요소의 레이아웃에 영향을 주지 않아야 할 때

position 사용 권장하는 경우

  • 정적인 레이아웃 구성 시
  • 요소의 위치 변경이 다른 요소의 레이아웃에 영향을 줘야 할 때
  • 복잡한 레이아웃 구조에서 요소를 배치할 때

성능 팁

Chrome 개발자 도구의 Performance 탭을 사용하여 두 방식의 성능 차이를 직접 확인해볼 수 있습니다. 특히 복잡한 페이지에서 여러 요소를 동시에 움직일 때 그 차이가 더욱 명확해집니다.

transform 속성은 CSS 애니메이션과 결합하여 더욱 동적이고 인터랙티브한 웹 요소를 만드는 데 사용될 수 있습니다. 이를 통해 사용자 경험을 크게 향상시킬 수 있으며, 적절히 사용하면 웹 페이지의 성능도 개선할 수 있습니다.

MDN transform 문서
15장 CSS 애니메이션 및 트랜지션15.2 transition