목차
- perspective-origin 예제 - 3D요소를 바라보는 방향
- perspective-origin 정의
- 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
부모요소의 속성값 상속.