변환(2)

지난 시간에 배웠던 transform 속성의 값으로 사용되는 변환 함수 중 관찰 대상의 원근 거리를 지정하는 perspective 함수를 알아보았다.

이번 시간에 배울 perspective 속성은 함수가 아니라 속성이다.

perspective 함수가 관잘 대상의 원근 거리를 지정하는 함수였다면, perspective 속성은 하위 요소를 관찰하는 원근 거리를 지정하는 속성이다.

원근 거리를 적용하는 대상이 다르다.

perspective 속성은 관찰 대상의 부모에 원근 거리를 적용하며, perspective 함수는 원근 거리를 관찰 대상에 직접적으로 부여한다.

기준점이 관찰 대상을 기준으로 적용되느냐, 관찰 대상의 부모 요소를 기준으로 적용되느냐의 차이이다.

주관적인 판단이긴 하지만 perspective 함수 보다는 부모 요소에 적용되는 perspective 속성을 사용하는 것을 권장한다고 한다.

rotateX나 rotateY 함수를 이용해서 어느 정도 각도 이상 돌리게 되면 요소의 뒷면을 보게 되는데, 이를 숨기기 위해서 backface-visibility 속성 값을 hidden으로 선언하여 숨길 수 있다.

backface-visibility 속성 값을 hidden으로 설정하면 뒷면이 조금이라도 보이면 요소는 투명하게 되어 볼 수 없게 된다.

그렇다고 해서 요소가 사라지는 것은 아니고 단순히 투명해져서 볼 수 없게 되는 것이다.

요소를 안 보이게 숨겨뒀다가 마우스를 올리면 보이게 하여 새로운 내용을 보일 수 있도록 페이지를 꾸밀 때 사용할 수 있다.