CSS perspective-origin 속성

정의와 사용법

perspective-origin 속성은 3D 요소가 기반을 둔 X축과 Y축을 정의합니다. 이 속성은 3D 요소의 하단 위치를 변경할 수 있습니다.

perspective-origin 속성을 요소에 정의할 때, 그 자식 요소가 아닌 요소 자신에 투시 효과를 받습니다.

주석:이 속성은 반드시 다음과 함께 사용해야 합니다: perspective 속성과 함께 사용되며, 3D 변환 요소에만 영향을 미칩니다.

추가 정보:

CSS3 강의:CSS3 3D 변환

HTML DOM 참조 매뉴얼:perspectiveOrigin 속성

예제

3D 요소의 기본 위치를 설정합니다:

div
{
perspective:150;
perspective-origin: 10% 10%;
}

직접 시도해 보세요

CSS 문법

perspective-origin: x-axis y-axis;

속성 값

값 설명
x-axis

이 뷰가 x축에서의 위치를 정의합니다. 기본 값: 50%.

가능한 값:

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

이 뷰가 y축에서의 위치를 정의합니다. 기본 값: 50%.

가능한 값:

  • top
  • center
  • bottom
  • length
  • %

기술 세부 사항

기본 값: 50% 50%
상속성: no
버전: CSS3
JavaScript 문법: object.style.perspectiveOrigin="10% 10%"

브라우저 지원

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

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-