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 이동 */

활용 팁

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

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

<div class="box translate-px">Pixels</div>
<div class="box translate-percent">Percent</div>

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: transform 0.3s ease;
}

.translate-px:hover {
  transform: translate(50px, 20px);
}

.translate-percent:hover {
  transform: translate(50%, 50%);
}

주의

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

1.2 scale() - 크기 조절

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

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

팁

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

<div class="box scale">Scale</div>
<div class="box scale-xy">Scale X and Y</div>

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: transform 0.3s ease;
}

.scale:hover {
  transform: scale(1.5);
}

.scale-xy:hover {
  transform: scale(1.5, 1);
}

1.3 rotate() - 회전

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

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

참고

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

<div class="box rotate-45">45deg</div>
<div class="box rotate-90">90deg</div>
<div class="box rotate-minus-45">-45deg</div>

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: transform 0.3s ease;
}

.rotate-45:hover {
  transform: rotate(45deg);
}

.rotate-90:hover {
  transform: rotate(90deg);
}

.rotate-minus-45:hover {
  transform: rotate(-45deg);
}

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);

주의

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

<div class="box skew-x">Skew X</div>
<div class="box skew-y">Skew Y</div>
<div class="box skew-xy">Skew XY</div>

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: transform 0.3s ease;
}

.skew-x:hover {
  transform: skewX(30deg);
}

.skew-y:hover {
  transform: skewY(30deg);
}

.skew-xy:hover {
  transform: skew(30deg, 20deg);
}

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축 추가 */

<div class="box origin-center">Center</div>
<div class="box origin-top-left">Top Left</div>
<div class="box origin-bottom-right">Bottom Right</div>

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: transform 0.3s ease;
}

.origin-center {
  transform-origin: center;
}

.origin-top-left {
  transform-origin: top left;
}

.origin-bottom-right {
  transform-origin: bottom right;
}

.box:hover {
  transform: rotate(45deg);
}

1.6 translate vs position

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

1.6.1 렌더링 과정의 차이

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

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

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

1.6.2 예제와 성능 비교

<div class="container">
  <div class="box translate">Translate</div>
  <div class="box position">Position</div>
</div>

.container {
  display: flex;
  justify-content: space-around;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}

.translate {
  transition: transform 0.3s ease;
}

.translate:hover {
  transform: translateY(30px);
}

.position {
  position: relative;
  transition: top 0.3s ease;
}

.position:hover {
  top: 30px;
}

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

translate 박스

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

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

1.6.3 사용 지침

translate 사용 권장하는 경우

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

position 사용 권장하는 경우

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

성능 팁

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

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

MDN transform 문서