[transform] CSS - perspective 속성 - 3D요소의 원근 조망. (= perspective속성 = 퍼스펙티브속성)

1. perspective 예제 - 원근 표현
2. perspective 정의
3. perspective 구문

perspective 예제 - 원근 표현

 

<style>

#a {

  position: relative;

  height: 150px;

  width: 150px;

  margin-left: 60px;

  border: 1px solid red;

  perspective: 100px;

}

#b {

  position: relative;

  height: 150px;

  width: 150px;

  margin-left: 60px;

  border: 1px solid red;

  perspective: none;

}

#aa, #bb {

  padding: 50px;

  position: absolute;

  border: 2px solid black;

  background-color: red;

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

  transform: rotateX(45deg);

  transform-style: preserve-3d;  

}

</style>

<h2>perspective: 100px:</h2>

<div id="a">a

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

</div>

<h2>perspective: none:</h2>

<div id="b">b

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

</div>

 

결과보기

perspective 정의

 

3D요소에 원근 효과 주기.

 

---

 

1.

개체가 사용자로부터 얼마나 멀리 있는지 지정.

즉, 물체를 가까이 볼수록 물체의 원근 효과 ↑.

(∴ 값이 낮을수록 원근 효과 ↑)

2.

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

 

3.

perspective-origin 속성: 사용자가 3D 개체를보고있는 위치를 정의

 

4.

기본값: none

상속여부: X

애니효과: O

CSS버전: CSS3

JS구문: object.style.perspective="50px"

 

5.

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

 

perspective 구문

 

selector {perspective: length|none|initial|inherit;}

 

---

[속성값]

 

length

요소가 시야에서 얼마나 멀리 있어야 하는지 지정. (예: 100px)

※ 숫자 작을수록 원근 효과 ↑

none

미설정. 즉, 0과 동일. (기본값)

initial

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

inherit

부모요소의 속성값 상속.