스타일 transformOrigin 속성

정의와 사용법

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

2D 변환 요소는 요소의 x 축과 y 축을 변경할 수 있습니다. 3D 변환 요소는 요소의 z 축도 변경할 수 있습니다.

비고：이 속성은 반드시 transform 속성 함께 사용하세요.

다른 참조를 보세요：

JavaScript 스타일 객체：transform 속성

CSS 참조 가이드：transform-origin 속성

예제

회전 요소의 기본 위치 설정：

document.getElementById("myDIV").style.transformOrigin = "0 0";

직접 시험해 보세요

문법

transformOrigin 속성 반환：

object.style.transformOrigin

transformOrigin 속성 설정：

object.style.transformOrigin = "x-axis y-axis z-axis|initial|inherit"

속성 값

값 설명
x-axis

뷰가 x 축에서의 배치 위치를 정의합니다. 가능한 값：

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

뷰가 y 축에서의 배치 위치를 정의합니다. 가능한 값：

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

뷰가 z 축에서의 배치 위치를 정의합니다. 가능한 값：

  • length
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 이 속성을 부모 요소에서 상속합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： 50% 50% 0
반환 값： 문자열로, 요소의 transform-origin 속성。
CSS 버전： CSS3

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
36.0 10.0 16.0 9.0 23.0