CSS) 변환 속성 - perspective-origin

1) perspective-origin

원근 거리의 기준점을 설정 - 어디서 바라볼 것이냐

눈의 위치에서 바라보는 파란색 사각형

속성 값

값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	top, bottom, center, %, 단위	50%

사용법1

 perspective-origin: 50% 50%;

<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:600px;
  perspective-origin: 50% 50%;
  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-origin: 50% 50%;

사용법2

 perspective-origin: 100% 200%;

<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:600px;
  perspective-origin: 100% 200%;
  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-origin: 100% 200%;