CSS transform 3D를 정리하면서

 

perspective는 3차원 변환함수에서만 적용된다.

 

아래는 perspective함수를 사용한 것이다.

transform: perspective(300px) rotateY(45deg);

 

- perspective를 적용하지 않으면 아래와 같이 작동함

- perspective는 부모 요소에 적용하는 것이 보편적이다.

 

 

 

원근의 기준을 바꿀 수도 있다.

아래와 같이 x축과 y축을 구성한다.

기본값은 50% 50%이다.

perspective-origin : 0 0;

- 위 처럼 적용하면 부모요소의 왼쪽 상단에서 item이 변화하는 모습을 볼 수 있다.

 

 

주의점

perspective()는 자식요소에만 적용됨

즉 자식의 자식요소에는 적용이 안된다. (후손에 적용이안됨)

 

이를 해결하기 위해 자식요소에 아래 속성을 추가해줘야한다. (perspective가 적용된 자식요소에 추가해야한다)

transform-style: preserve-3d;

- 기본 값은 flat 이다.

- 3d효과를 보존하겠다라는 뜻이다.

- 이또한 후손에게는 적용이 되지 않느다.

 

만약 부모요소에서 transform : perspective 함수를 사용해서 3d효과를 적용한다면

부모요소에 transform-style: preserve-3d를 추가해줘야 3d효과가 보존된다.

perspective : 300px 과 같이 적용해도 자식요소에 3d효과가 주어지지않는다.

 

 

backface-visibility : hidden;

요소에는 뒷면이라는 것이 있다.

이를 안보이게 할 수 있다.

뒷면이 보이는 순간 화면에서 안보이게 할 수 있다.