[CSS] perspective - 원근법

zzzdawn45·2025년 7월 28일

목록 보기

6/8

2D 요소에 3D 효과를 부여하기 위한 속성
요소가 z축으로 회전하거나 이동할때 원금감을 표현
가까운 요소는 크게, 먼 요소는 작게 보이는 효과를 낼 수 있음

01 perspective property : 3D 원근감 설정(부모기준)

perspective 속성를 주면 z축으로 움직여서 거리감을 줄 수 있다

.parent {
	perspective: 500px;
}
.child {
	transform: rotateY(45deg);
}

여기서 내가 얼마나 떨어져서 보고있는가를 나타낸다고 할 수 있다. 즉, 500px만큼 떨어져서 보고 있는 셈이다

위 이미지에서 파란색 원형은 3d 공간 상의 물체이다. d는 보는 사람과 화면과의 거리이고(=perspective), Z는 z축상 요소의 위치를 말한다

<div class="origin">
  <div class="rotate-pannel"></div>
</div>

<style>
  .origin {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 100px auto;

    /* 첫번째 그림 */
    perspective: 100px;
    /* 두번째 그림 */
    perspective: 200px;
  }
  .rotate-pannel{
    width: 200px;
    height: 200px;
    background: red;
    transform: rotateX(45deg);
  }
</style>

perspective: 200px일때

perspective: 400px일때

02 transform: perspective : 개별 요소에 직접 원근 부여

개별적인 투영점을 설정할때는 transform 속성의 값으로 perspective를 주고, 괄호 안에 수치를 입력한다

.panel {
	transform: perspective(400px) rotateY(45deg);
}

<div class="origin">
  <div class="pannel"></div>
  <div class="pannel"></div>
  <div class="pannel"></div>
  <div class="pannel"></div>

</div>

<style>
  .origin {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    height: 200px;
    border: 1px solid black;
    margin: 100px auto;
    perspective: 1000px;
  }
  .pannel{
    width: 200px;
    height: 200px;
    background: aqua;
    transform: perspective(400px) rotateY(45deg);
  }
</style>

03 perspective-origin : 소실점 위치 지정

perspective와 관련된 속성으로는 perspective-origin이 있다. 이것도 마찬가지로 보는 사람이 어느 위치에서 보고 있는지를 나타내는 속성이다. perspective 속성과 함께 소실점을 나타내는데 사용한다. 50% 50% 이며, x축 y축에 해당한다