CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성大全

CSS3 transform-style 속성 CSS3 transform 속성

CSS3 transform-origin 속성 사용 방법 및 예제

transform-Origin 속성은 변환 요소의 위치를 변경할 수 있도록 합니다.

2D 변환 요소는 요소의 X와 Y축을 변경할 수 있습니다. 3D 변환 요소는 또한 요소의 Z축을 변경할 수 있습니다.　

다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

기본 값：	50% 50% 0
적용 대상：	변형 가능한 요소
thừa kế：	없음
애니메이션 가능성：	그렇습니다.참조하십시오 애니메이션 속성。
버전：	CSS3의 새 기능
JavaScript 문법：	object.style.transformOrigin="20@%"

transform-origin 사용 문법

이 속성의 문법은 다음과 같습니다：

transform-origin: x-position | y-position | z-position | initial | inherit

주의:만약 transform 만을 사용하면-origin 속성이 값을 지정하면 두 번째 값은 center로 가정되며, 그 값은50%의 값.

아래 예제는 transform을 사용하여 0%의 값을 사용하는 방법을 설명합니다。-origin 속성.

예제

img {
　　　　/*　크롬, 사파리, 오페라　*/
　　　　-webkit-transform: rotate(30deg);
　　　　-webkit-transform-origin:　25% bottom;
　　　　/*　파이어폭스　*/
　　　　-moz-transform: rotate(30deg);
　　　　-moz-transform-origin:　25% bottom;
　　　　/*　IE　9　*/
　　　　-ms-transform: rotate(30deg);
　　　　-ms-transform-origin:　25% bottom;
　　　　
　　　　transform: rotate(30deg);
　　　　transform-origin:　25% bottom;
}

테스트를 보고‹/›

주의:두 가치 중 하나가 키워드가 아니면, 첫 번째 값은 변환 원점의 수평 위치(또는 이동)을 나타내고, 두 번째 값은 변환 원점의 수직 위치(또는 이동)을 나타냅니다。

속성 값

아래 표는 이 속성의 값을 설명합니다。

가치	설명
x-position	변환 원점의 수평 위치(또는 이동)을 나타냅니다. 다음 중 하나의 값을 가질 수 있습니다： percentage -요소 너비에 대한 이동량을 정의합니다. length -사용하는 길이 값을 정의합니다. left -0％ 또는 너비가 없는. center -박스 너비의50％ 또는 반분. right -равен100％ 또는 전체 박스 너비.
y-position	변환 원점의 수직 위치(또는 이동)을 나타냅니다. 다음 중 하나의 값을 가질 수 있습니다： percentage -요소 높이에 대한 이동량을 정의합니다. length -사용하는 길이 값을 정의합니다. top -0％ 또는 높이가 없는. center -박스 높이의50％ 또는 반분. bottom -равен100％ 또는 전체 박스 높이.
z-position	하나length가치는 사용자의 눈에서 Z=0 원점까지의 거리를 설명합니다（3D 변환）。백분율 값은 유효하지 않습니다。
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 부모 요소의 transform를 사용하는 관련 요소가 적용됩니다.-origin 속성 값.

브라우저 호환성

transform-origin 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

	파이어폭스 （2D）3.5 +，（3D）10+ ^-moz-，16 + 크롬 （2D）4 +，（3D）12+ ^-webkit-，36 + 인터넷 익스플로러 （2D）9 ^-ms-，10+ 애플 사파리 （2D）3.2 +，（3D）4+ ^-webkit- 오페라 （2D）10.5+ -o 　 ^-，（2D）（3D）15+ 　 ^-webkit-，23+

더 읽기

다음 튜토리얼을 참조하십시오:CSS3 2D 변환，CSS3 3D 변환

CSS3 transform-style 속성 CSS3 transform 속성