변환 속성 - perspective, perspective-origin

1. perspective

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

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

 

 

.perspective{
  width: 200px;
  perspective: 500px;
  padding: 70px;
}

.grand-parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
}

.parent{
  width: 200px;
  border: 3px solid blue;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

img{
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

원근거리 500인 이미지

 

.perspective{
  width: 200px;
  perspective: 200px;
  padding: 70px;
}

.grand-parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
}

.parent{
  width: 200px;
  border: 3px solid blue;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

img{
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

원근거리가 200인 이미지

그림에서 보면 알 수 있듯이, perspective 값이 작아질수록 가깝게 있다는것을 느낄수 있다.

perspective는 관찰하고자 하는 요소들의 상위요소에 지정해야한다.

 

 

 

perspective 속성과 함수의 차이점

속성/함수	적용대상	기준점 설정
perspective	관찰 대상의 부모 요소   --> 관찰하는 대상이 여러개 일때	perspective-origin
transform: perspective( )	관찰대상   --> 관찰하는 대상이 한개 일때	transform-origin

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

 

 

 

 

2. perspective-origin

원근 거리의 기준을 설정

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

perspective-origin도 perspective와 마찬가지로 조상(부모)요소에 값을 설정할 수 있다.

 

 

.perspective{
  width: 200px;
  perspective: 600px;
  perspective-origin: 100% 200%;
  padding: 70px;
}

.grand-parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
}

.parent{
  width: 200px;
  border: 3px solid blue;
  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%

다음은 그림의 설명과 같은값을 넣었을때 출력된 모습이다. 100%이상 값을 부여해도 된다는것을 알 수 있다.

 

 

perspective-origin: 50% 50%

 

모든 사진에서 알 수 있다시피 어디서 바라보느냐로 설정함에 따라서 기울기와 원근법이 달라지는걸 알 수 있다.