EverGiver
3D 본문
728x90
Perspective (원근감)
| perspective | perspective() | |
| 유형 | 속성 | 메서드 |
| 작성 위치 | 부모 | 자신 |
| 사용 방법 | perspective: 값 | transform:perspective(값) |
- transform:perspective()
- 3D 공간에서 요소와 관측 점과의 거리(원근감)를 지정하는 속성
- 값이 작을수록 가깝게 보이고, 멀수록 멀게 보인다. - perspective
- 속성은 부모에게 사용하고, 적용 범위는 자식에게만 가능
- perspective-origin을 사용할 수 있다. - transform:perspective()와 perspective의 차이
- transform:perspective()의 경우 관찰자가 사물을 한꺼번에 본다.
- perspective의 경우 관찰자가 사물을 한 개씩 보고 있다. - transform-style : preserve-3d
- 3D 효과가 적용된 요소에 모션 처리를 하면 해당 3D 효과가 풀리는데, 이때 부모 요소에 preserve-3d 속성을 적용하여 3D 효과를 유지할 수 있다. - perspective-origin:가로축 세로축
- 요소의 변형이 일어나는 중심축을 가로축, 세로축 기준으로 변경할 수 있다.
<body>
<svg id="back" width="100%" height="100%">
<defs>
<pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#ccc" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#smallGrid)"/>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="lightblue" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
<div class="box1">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, possimus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, possimus!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, possimus!</p>
</div>
<style>
.box1{
width:200px;
height:400px;
border:1px solid #000;
margin:40px;
perspective:400px;
transform-style:preserve-3d;
}
.box1 p{
width:100px;
height:100px;
background:coral;
margin:10px;
transform:perspective(400px) rotateY(45deg);
}
</style>
</body>728x90
Comments