목차
- perspective 예제 - 원근 표현
- perspective 정의
- 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
부모요소의 속성값 상속.
