CSS 트랜스폼 오리진 속성

추천 과정:

정의와 사용법

transform-origin 속성은 변환된 요소의 위치를 변경할 수 있습니다.

2D 변환 요소는 x와 y축을 변경할 수 있습니다. 3D 변환 요소는 Z축도 변경할 수 있습니다.演示。

transform-origin 속성을 더 잘 이해하기 위해 다음을 확인하세요:演示。

사파리/크롬 사용자: transform-origin 속성이 3D 변환에 사용되는 경우를 더 잘 이해하기 위해 다음을 확인하세요:주석: 트랜스폼 속성과 함께 사용해야 합니다.

transform 속성을 더 잘 이해하기 위해 다음을 확인하세요:演示。

추가로 참조:

CSS3 가이드:CSS3 2D 변환

CSS3 가이드:CSS3 3D 변환

HTML DOM 참조 가이드:transformOrigin 속성

예제

회전 요소의 기본 위치를 설정합니다:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

개인적으로 시도해 보세요

페이지 하단에 더 많은 예제가 있습니다。

CSS 문법

transform-origin: x-axis y-axis z-axis;

속성 값

값 설명
x-axis

뷰가 X축의 어디에 배치되는지 정의합니다. 가능한 값:

  • left
  • center
  • right
  • length
  • %
y-axis

뷰가 Y축의 어디에 배치되는지 정의합니다. 가능한 값:

  • top
  • center
  • bottom
  • length
  • %
z-axis

뷰가 Z축의 어디에 배치되는지 정의합니다. 가능한 값:

  • length

기술 세부 사항

기본값: 50% 50% 0
상속성: no
버전: CSS3
JavaScript 문법: object.style.transformOrigin="20% 40%"

브라우저 지원

표에 나타낸 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전입니다。

prefix를 사용하는 첫 번째 버전의 숫자를 나타내는 -webkit-、-moz- 또는 -ms-가 포함된 것입니다。

속성 크롬 IE 파이어폭스 사파리 오페라
transform-origin
(이값 문법)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(삼값 문법)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-