[transform] CSS - perspective-origin 속성 - 3D요소 바라보는 위치 (= perspective-origin속성 = 퍼스펙티브오리진속성)

1. perspective-origin 예제 - 3D요소를 바라보는 방향
2. perspective-origin 정의
3. perspective-origin 구문

perspective-origin 예제 - 3D요소를 바라보는 방향

 

<style>

#a,#b,#c {

  position: relative;

  height: 150px;

  width: 150px;

  margin-left: 60px;

  border: 1px solid blue;

  perspective: 100px; 

}

#a {perspective-origin: left;}

#b {perspective-origin: bottom right;}

#c {perspective-origin: -90%;}

#aa, #bb, #cc {

  padding: 50px;

  position: absolute;

  border: 1px solid black;

  background-color: red;

  background: rgba(100,150,200,0.5); 

  transform-style: preserve-3d;

  transform: rotateX(45deg);

}

</style>

<h2>perspective-origin: left:</h2>

<div id="a">a

  <div id="aa">aa</div>

</div>

<h2>perspective-origin: bottom right:</h2>

<div id="b">b

  <div id="bb">bb</div>

</div>

<h2>perspective-origin: -90%:</h2>

<div id="c">c

  <div id="cc">cc</div>

</div>

 

결과보기

perspective-origin 정의

 

3D요소를 바라보는 방향 지정.

 

---

 

1.

실제 perspective-origin 효과 적용되는 건 자식요소임. (주의: 해당요소 X)

 

2.

perspective 속성과 함께 사용.

3.

기본값: 50% 50%

상속여부: X

애니효과: O

CSS버전: CSS3

JS구문: object.style.perspectiveOrigin="10px 50%"

4.

IE10 이상 주요 최신 브라우저 지원.

 

perspective-origin 구문

 

selector {perspective-origin: x-axis y-axis|initial|inherit;}

 

---

[속성값]

 

x-axis

X축 시점 위치. (기본값: 50%) ※ 가능값 종류 리스트.

left : 왼쪽.

center : 중앙.

right : 오른쪽.

length : (예) 50px

% : (예) 50%

 

y-axis

Y축 시점 위치. (기본값: 50%) ※ 가능값 종류 리스트.

top : 상단.

center : 중단.

bottom : 하단.

length : (예) 50px

% : (예) 50%

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.