CSS) 변환 속성 - perspective

1) perspective

하위 요소를 관찰하는 원근 거리를 설정

속성 값

값	의미	기본값
단위	px, em, cm 등 단위로 지정

 

사용법

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img
src="https://heropy.blog/css/images/logo.png"
alt="HEROPY">
    </div>
  </div>
</div>

.perspective {
  width: 200px;
  perspective:200px;
  padding: 70px;
}
.grand-parent {
  width: 200px;
  border: 3px solid dodgerblue;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
/*   transform-style: flat; */
}
.parent {
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img {
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

 

※ perspective는 상위 부모에게 적용해야 하위 자식들에게까지 적용이 됨
perspective의 값이 작을 수록 원근감이 커짐

 

2) perspective 속성과 함수의 차이점

 

속성 값

값	의미	기본값
perspective	관찰 대상의 부모 요소	perspective-origin
transform: perspective()	관찰 대상	transform-origin

※ perspective 속성은 관찰 대상의 부모(조상) 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정하며, transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정함.