정의 및 사용 방법

transform-origin 속성은
요소에 transform 속성으로 적용한 시각적 변형이 어디서부터 시작될지 기준점(origin)을 지정합니다.

이 속성을 사용하면 요소가 회전, 확대/축소 등 변형될 때 기준점을 자유롭게 설정할 수 있어, 더 다양한 시각적 변형 효과를 구현하는 데 매우 유용합니다.

기본 예제

다음 예제는 transform: rotate(45deg)를 적용하여 45도 회전하는 요소가 transform-origin 속성으로 시각적 변형이 어디서부터 시작되는지를 잘 보여줍니다.

HTML 예제에 사용하는 공통 HTML 
<div class="rotate"></div>
CSS 예제에 사용하는 공통 CSS 
.rotate {
    width: 100px;
    height: 70px;
    background-color: rgba(255, 0, 200, .15);
    border: 3px dashed #663399;
    transform: rotate(45deg);
}

참고하세요!
공통 HTML과 CSS에는 없지만, 예제의 이해를 돕기 위해 요소가 회전하기 이전의 원본 모양을 비교할 수 있드록 회색 배경의 원본 요소를 임의로 추가했습니다.

transform-origin: left top

요소가 회전할 때 기준점은 요소 영역의 맨 왼쪽 상단(left top) 모서리입니다. 이때 요소는 이 기준점을 시작으로 시계방향 45도 회전합니다.

CSS 
.rotate {
    transform-origin: left top;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

transform-origin: right top

요소가 회전할 때 기준점은 요소 영역의 맨 오른쪽 상단(right top) 모서리입니다. 이때 요소는 이 기준점을 시작으로 시계방향 45도 회전합니다.

CSS 
.rotate {
    transform-origin: right top;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

transform-origin: right bottom

요소가 회전할 때 기준점은 요소 영역의 맨 오른쪽 하단(right bottom) 모서리입니다. 이때 요소는 이 기준점을 시작으로 시계방향 45도 회전합니다.

CSS 
.rotate {
    transform-origin: right bottom;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

transform-origin: center center

요소가 회전할 때 기준점은 요소 영역의 가로 축 중앙과 세로 축 중앙center center)입니다. 이때 요소는 이 기준점을 시작으로 시계방향 45도 회전합니다.

CSS 
.rotate {
    transform-origin: center center;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

형식 구문

CSS 
selector {
    transform-origin:  /* value */
}

구문

CSS background-position 속성 값 예시 
/* 두 개 키워드 값 구문: 가로 축 | 세로 축 */
transform-origin: left top;
transform-origin: left center;
transform-origin: left bottom;
transform-origin: right top;
transform-origin: right center;
transform-origin: right bottom;
transform-origin: center top;
transform-origin: center center;
transform-origin: center bottom;

/* 한 개 키워드 값 구문: 가로 축 | 생략한 세로 축은 무조건 center 값 */
transform-origin: left; /* left center;와 동일 */
transform-origin: right; /* right center;와 동일 */
transform-origin: center; /* center center;와 동일 */

/* 백분율(%) 값 */
transform-origin: 0% 0%; /* left top;과 동일 */
transform-origin: 50% 50%; /* center center;와 동일  */
transform-origin: 100% 100%; /* right bottom;과 동일 */
transform-origin: 25% 40%;

/* 길이 값 */
transform-origin: 10px 25px;
transform-origin: 2em 5em;
transform-origin: 2rem 5rem;
transform-origin: 20vw 40vh;

/* 두 개 값 구문: 가로 축 | 세로 축 */
transform-origin: left 2em;
transform-origin: 2em bottom;
transform-origin: 2em 50%;

/* 한 개 값 구문: 가로 축 | 생략한 세로 축은 무조건 center 값 */
transform-origin: 0; /* left center;와 동일 */
transform-origin: 20px; /* 20px center;와 동일 */
transform-origin: 50%; /* center center;와 동일 */

/* 세 개 값 구문: 가로 축 | 세로 축 | Z 축 위치*/
/* Z 축 값은 3D 변환에서만 의미가 있고, 2D 변형에서는 무시됩니다. */
/* Z 축 값은 <length>(길이 값, 예: px, em)만 사용할 수 있으며, 백분율(%) 단위나 키워드 값은 사용할 수 없습니다. */
transform-origin: left 10px 2em;
transform-origin: right bottom 10px;
transform-origin: 50% 50% 0; /* 초깃값 */

/* 글로벌 값 */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;

값

transition-origin 속성 값
left 요소 영역의 맨 왼쪽이 기준점입니다.
right 요소 영역의 맨 오른쪽이 기준점입니다.
top 요소 영역의 맨 위쪽이 기준점입니다.
bottom 요소 영역의 맨 아래쪽이 기준점입니다.
center
  • 가로 축 값에서는 요소 영역의 가로 축 중앙이 기준점입니다.
  • 세로 축 값에서는 요소 영역의 세로 축 중앙이 기준점입니다.
길이 주어진 요소 영역 위치의 가장자리 간격 띄우기(offset)를 길이로 지정하는 값입니다. 음수 값이 허용됩니다.
백분율(%) 주어진 요소 영역 위치의 가장자리 간격 띄우기(offset)를 백분율로 지정하는 값입니다. 음수 값이 허용됩니다.

가로 축

  • 0%는 요소 영역의 맨 왼쪽이 기준점입니다. (left와 동일)
  • 50%는 요소 영역의 가로 축 중앙이 기준점입니다. (center와 동일)
  • 100%는 요소 영역의 맨 오른쪽이 기준점입니다. (right와 동일)

세로 축

  • 0%는 요소 영역의 맨 위쪽이 기준점입니다. (top과 동일)
  • 50%는 요소 영역의 세로 축 중앙이 기준점입니다. (center와 동일)
  • 100%는 요소 영역의 맨 아래쪽이 기준점입니다. (bottom과 동일)

한 개 값 구문

CSS 형식 구문 
selector {
    transform-origin: <가로 축>;
}

한 개의 값만 있으면 가로 축 값을 나타내며, 세로 축 값은 무조건 center(또는 50%)로 지정됩니다.

CSS 예제 
/* 한 개 값 구문: 가로 축 | 생략한 세로 축은 무조건 center 값 */
transform-origin: left; /* left center;와 동일 */
transform-origin: center; /* center center;와 동일 */
transform-origin: 0; /* left center;와 동일 */
transform-origin: 20px; /* 20px center;와 동일 */
transform-origin: 50%; /* center center;와 동일 */
예제
CSS 
.rotate {
    transform: rotate(45deg);
    transform-origin: center;  /* center center;와 동일 */
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

두 개 값 구문

CSS 형식 구문 
selector {
    transform-origin: <가로 축> <세로 축>;
}

두 개 값 구문은 첫 번째 값이 가로 축에 대한 값이고 두 번째 값이 세로 축에 대한 값입니다.
키워드나 길이, 백분율(%) 단위 값을 혼용해서 사용할 수 있습니다.

CSS 예제 
transform-origin: left center;
transform-origin: 10px 25px;
transform-origin: 50% 50%;
transform-origin: 2em 5em;
transform-origin: 2em bottom;
transform-origin: center 5em;
transform-origin: 10px 5em;
예제
CSS 
.rotate {
    transform: rotate(45deg);
    transform-origin: left bottom;  /* 0 100%;와 동일 */
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

세 개 값 구문

CSS 형식 구문 
selector {
    transform-origin: <가로 축> <세로 축> <Z 축>;
}

세 개 값 구문은 첫 번째 값이 가로 축에 대한 값이고 두 번째 값이 세로 축, 세 번째 값은 Z 축에 대한 값입니다.

  • 첫 번째 값(가로 축)은 키워드나 길이, 백분율(%) 단위 값을 혼용해서 사용할 수 있습니다.
  • 두 번째 값(가로 축)은 키워드나 길이, 백분율(%) 단위 값을 혼용해서 사용할 수 있습니다.
  • 세 번째 값(Z 축)은 길이 값만 사용할 수 있으며, 백분율(%) 단위나 키워드 값은 사용할 수 없습니다.
  • Z 축 값은 3D 변환에서만 의미가 있고, 2D 변형에서는 무시됩니다.
예제
CSS 
.rotate {
    transform: perspective(400px) rotate3d(1, 1, 0, 45deg);
    transform-origin: left bottom 50px;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

형식 정의

transform-origin 속성의 형식 정의
초깃값 50% 50% 0
적용 요소 변형 가능한 요소
즉, 요소의 영역인 너비나 높이를 지정할 수 있는 요소
상속 아니오
백분율 요소 자신의 실제 크기(bounding box)를 기준으로 계산
애니메이션 예

추가 예제

다음 예제는 transform: scale(1.2, 1.2)를 적용하여 가로 축과 세로 축이 모두 1.2배로 확대 요소가 transform-origin 속성으로 시각적 변형이 어디서부터 시작되는지를 잘 보여줍니다.

HTML 예제에 사용하는 공통 HTML 
<div class="scale"></div>
CSS 예제에 사용하는 공통 CSS 
.scale {
    width: 100px;
    height: 70px;
    background-color: rgba(255, 0, 200, .15);
    border: 3px dashed #663399;
    transform: scale(1.2, 1.2);
}

참고하세요!
공통 HTML과 CSS에는 없지만, 예제의 이해를 돕기 위해 요소가 회전하기 이전의 원본 모양을 비교할 수 있드록 회색 배경의 원본 요소를 임의로 추가했습니다.

transform-origin: left top

CSS 
.rotate {
    transform-origin: left top;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

transform-origin: right top

CSS 
.rotate {
    transform-origin: right top;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

transform-origin: right bottom

CSS 
.rotate {
    transform-origin: right bottom;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

transform-origin: center center

CSS 
.rotate {
    transform-origin: center center;
}
실제 적용된 모습 요소에 마우스를 올려보세요. 변형 기준점의 시작을 더 쉽게 파악할 수 있습니다.

브라우저 호환성

transform-origin 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
transform-origin 36 12 16 9

명세서

transform-origin 속성의 명세서 사양
명세서 사양
transform-origin CSS Transforms Module Level 1
#transform-origin-property

참고문헌

같이 보기