CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성大全

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

perspective-origin 속성 정의 3D 원소가 기반으로 한 X 축과 Y 축. 이 속성은 원소를 변경할 수 있도록 허용합니다 3D 원소의 하단 위치. 정의할 때 perspective-Origin 속성은 원소 자체가 아니라 원소의 자식 원소인 투시도입니다.

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

기본 값：	50P%
적용 대상：	변형 가능 요소
thừa kế：	없습니다
애니메이션 가능：	는요.参照하십시오 애니메이션 속성。
버전：	CSS3의 새로운 기능
JavaScript 문법：	object.style.perspectiveOrigin="20%"

Perspective-origin 사용 문법

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

perspective-origin:　[　x-position　y-position　]　|　initial　|　inherit

注意：만약 perspective에만-origin 속성이 값이 지정되면 두 번째 값은 중심으로 가정되고, equals50％의 값.

다음 예제는 perspective를 사용하는 방법을 보여줍니다.-origin 속성.

example

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　perspective-origin:　20%　top;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform:　rotate3d(0,　1,　0,　60deg);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　rotate3d(0,　1,　0,　60deg);　
}

проверьте, ›/›

注意：если по крайней мере один из двух значений не является ключевым словом, то первое значение представляет горизонтальное положение (или смещение) точки отсчета перспективы, второе значение представляет вертикальное положение (или смещение) точки отсчета перспективы.

значение свойства

ниже приведена таблица, описывающая значения этого свойства.

value	description
x-axis	пresents the horizontal position (or offset) of the perspective origin.它可以具有以下值之一： percentage -определяет смещение значения длины относительно ширины элемента. length -определяет смещение значения длины, используемого. left -равенство 0％ 또는 ноль ширины. center -равенство ширины коробки50％ 또는 반 박스 높이. right -равен100％ 또는 전체 박스 너비.
y-axis	пresents the vertical position (or offset) of the perspective origin.它可以具有以下值之一： percentage -определяет смещение значения длины относительно высоты элемента. length -определяет смещение значения длины, используемого. top -равенство 0％ 또는 ноль высоты. center -равенство высоты коробки50％ 또는 반 박스 높이. bottom -равен100％ 또는 전체 박스 높이.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 부모 요소의 perspective와 연결된 요소가 사용됩니다.-origin 속성 값.

브라우저 호환성

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

	파이어폭스 10+ ^-moz-，16 + Google Chrome 12+ ^-webkit-，36+ 인터넷 익스플로러 10+ Apple Safari 4.0.3+ ^-webkit- 오페라 15+ ^-webkit-，23+

더 읽기

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

CSS position 속성 CSS3 perspective 속성