CSS transform-origin 속성
예시
회전된 요소의 기본 배치 설정:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
정의 및 사용
속성을 사용하면 변환된 요소 의 transform-origin
위치를 변경할 수 있습니다.
2D 변환은 요소의 x축과 y축을 변경할 수 있습니다. 3D 변환은 요소의 z축도 변경할 수 있습니다.
transform-origin
속성
을 더 잘 이해하려면 데모 를 보십시오 .
참고: 이 속성은 transform 속성 과 함께 사용해야 합니다 .
팁: 3D 변환 에 대한 이 속성을 더 잘 이해하려면 데모 를 보십시오 .
기본값: | 50% 50% 0 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 예. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.transformOrigin="0 0" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
transform-origin (two-value syntax) |
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 (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS 구문
transform-origin: x-axis y-axis z-axis|initial|inherit;
속성 값
Property Value | Description |
---|---|
x-axis | Defines where the view is placed at the x-axis. Possible values:
|
y-axis | Defines where the view is placed at the y-axis. Possible values:
|
z-axis | Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
|
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 튜토리얼: CSS 2D 변환
CSS 튜토리얼: CSS 3D 변환
HTML DOM 참조: transformOrigin 속성