[CSS]transform(3D) 에서 함께 사용할 속성 perspective(원근법)과 backface-visibility(뒷면가시성)

perspective

perspective를 사용했을때와 안했을 때의 차이를 마우스를 올려 확인해보세요.

 

perspective를 사용하지 않으면 translateZ의 변화를 느낄수 없습니다.

(translateZ 변화없을 때 perspective 를 사용)

그러나 perspective를 사용해 원근감을 주면 차이를 느낄 수 있습니다.

 

다른 transform 속성에서 확인해 보세요 

 

 

좀더 자세한 내용은 아래 링크 참고 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

CSS transform 사용하기

 

perspective 의 숫자가 커질수록 멀리서 보는 느낌이 난다 

아래에서 그 차이를 볼 수 있다. 

 

 

 

 

 

perspective-origin

perspective와 함께사용해야하는 기준점을 지정해주는 속성이다.

이는 우리가 흔히 생각하는 방향으로 설정하기 위해서는 값을 아래와 같이 주어야한다. 

perspective-origin: center;

다르게 위치를 지정해주면 생각하는 애니메이션과 다르게 왜곡이 일어날 수있다... 아래에서 차이를 확인해보세요..

(이미지가 늘어져보인다던지..

특히 rotateX()를 통해 이미지를 눕혔다 일어나는 애니메이션을 구현하면 center값이 아닌 다른값을 주면 이미지가 늘어졌다 줄어드는 것처럼 보인다..)

 

 

 

각 기준점에 따르게 어떻게 보이는지는 아래의 사이트를 참고하면 자세히 알 수 있다.

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin

perspective-origin

 

backface-visibility

뒤집어진 뒷면이 보여질지 안보여질지를 결정한다(visible/hidden)