CSS3 3D effect(perspective) #1

CSS3 3D 효과

CSS3 에서 가장 주목을 끌만한 것은 3D 와 관련된 자연스러운 화면 효과입니다.

아직까지 이 3D 효과는 2D에서 사용되는 transform, translate 과 마찬가지로 브라우저의 호환성이 통일되지 않아서 -webkit- 과 같은 벤더프리픽스(vendor prefix)를 이용해야 구현할 수 있습니다.

3D 효과를 표현하기 위해서는 2D 효과인 transform, transition 등에 3D 를 위한 속성을 설정하면 됩니다.

3D 효과를 위한 가장 중요한 설정은 투영점(perspective)을 지정하는 것입니다.

3D 효과를 위한 투영점 설정

3D 효과를 이해하기 위해 다음의 x축, y축, z축에 대한 그림을 참고하기 바랍니다.

  

3D 효과를 주기 위해서는 투영점을 지정함으로서 화면에 어떤 영향을 미치는지 이해하는 것이 중요합니다.

perspective(투영점)은 3D 원근감을 주는 초점이라고 할 수 있습니다.

투영점이라는 단어는 사진을 다루는 사람들에게 익숙할 지도 모르겠으나 이 용어는 관찰자 관점(viewing perspctive), 원근감 등의 용어와도 비슷한 의미로 받아들일 수 있습니다.

즉, 3D 환경을 만들기 위해서 사용자는 관찰자 지점, 즉 투영점(깊이감,원근감)을 구체화시켜야 하며, 이것이 입체감을 부여하게 됩니다.

기본적으로 보는 사람의 위치를 추정하여 이 투영점을 명시함으로서 3D 환경의 관점을 설정하는 것입니다.

그리고 이 속성은 픽셀 기반의 길이 값을 지정할 수 있으며 z축을 따라 캔버스로부터 관찰자의 거리(깊이감)을 나타내게 됩니다.

그래서 위 코드는 스크린으로 부터 300px 만큼 떨어진 곳(또는 z축을 따라 300px)에 관찰자가 있다는 것을 근거로 하여 3D 환경을 구성하게 된 것입니다.

만약 이 perspective 속성인 투영점(또는 관찰자 관점,원근감,깊이감)이라는 개념이 어렵다면, 기본적으로 멀리 떨어져 있어야 하는 사물은 작게 만들고 가까운 곳에 있어야 하는 사물은 크게 만들어서 원근감을 부여하는 것이라고 이해할 수도 있습니다.

다음의 예제를 살펴보도록 합니다.

See the Pen 3D 투영점 설정 #1 by jaeheekim (@jaehee) on CodePen.

첫 번째 박스에는 아무런 효과도 없는 기본 박스이고 두 번째 박스에는 rotateX(45deg) 를 적용한 박스입니다.

2D 에서 X축 회전을 시킨 것이기 때문에 작아진 박스처럼 보이는 것입니다.

세 번째 박스에 투영점을 지정하기 위한 속성을  -webkit-transform-style: preserve-3d; -webkit-perspective: 300px; 이와 같이 선언하였습니다.

이 속성으로 인해 이 요소는 3차원의 객체로 변환되어 실제와 같은 깊이감을 전해주게 됩니다.

위 예제에서는-webkit-transform 이라는 속성을 이용하여 rotateX 를 선언한 것에 주목해야 합니다.

-webkit-transform 이라는 속성(용어)은 3D 효과에서 모양 자체의 변형이 있기 때문에 만들어진 용어입니다.

위 설정에서 rotateX 를 이용했기 때문에 x축을 기준으로 하여 45도 회전하고 투영점을 깊이를 가지고 있는데 위에서 투영점을 300px 을 주었기 때문에 즉, 쉽게 생각해서 300px 만큼 떨어진 위체에서 wrapper 영역을 바라보고 있다고 할 수 있습니다.

그리고 여기서 무엇보다 중요한 점은 이미지등과 같은 대상 요소에 perspective 속성(투영점)을 설정하는 것이 아니라, 변형되는 요소를 포함하고 있는 요소에 투영점을 설정해야만 한다는 것입니다.

즉, 전환된 요소의 부모에 적용하는 것이며 해당 부모의 모든 자식들이 동일한 관점으로 동일한 3D 공간에서 동작하게 되는 것입니다.

그러나 만약에 해당 요소에만 3D 전환을 적용하고 싶다면 그렇게 할 수도 있습니다.

해당 요소에만 3D를 적용하려면 투영점(깊이감)에 대한 값을 아래의 코드와 같이 다르게 적용하면 됩니다.

See the Pen 투영점(perspective) #2 by jaeheekim (@jaehee) on CodePen.

다음은 투영점과 트랜스폼을 적용할 경우의 이해를 돕기 위한 이미지입니다.

투영점과 좌표축에 대한 이해를 돕기 위해 다음 그림을 참고하기 바랍니다.

위에서 투영점을 적용한 예제 코드는 두개가 있습니다.

하나는 부모인 컨테이너에 투영점을 적용한 것이고 또 다른 하나는 대상 요소에 투영점을 반영한 것입니다.

위 예제에서는 별다른 차이점을 느끼지 못했을 테지만 컨테이너에 perspective 속성을 사용하는 것과 대상 요소에 이 속성을 사용하는 것은 근본적으로 다른 결과를 만들어 냅니다.

특히 전환된 요소가 3D 전환과 관련이 있는 형제 요소들을 가지고 있을 때 다른 결과를 낳게 됩니다.

다음의 코드는 개별 요소들에 perspective() 함수를 적용한 것과 컨테이너에 perspective 속성을 적용한 것에 대한 차이점에 대해 살펴보도록 하겠습니다.

See the Pen 투영점 설정 #3 by jaeheekim (@jaehee) on CodePen.

위 결과를 살펴보면 부모에 투영점이 적용되었을 경우와 대상요소에 적용되었을 때의 결과가 다르게 나타납니다.

특히 부모 요소에 투영점이 반영된 형제 요소의 변형(transform)이  개별요소가 아니라 원근감을 서로 간에 영향을 미치면서 반영되는 것을 확인하실 수 있을 것입니다.

그리고 회전(rotate)에 관해서는 요소의 전체 좌표 시스템이 회전한다는 점을 기억해두어야 합니다.

이는 요소들이 사용자가 있는 방향을 향하는 것이 아니라 실질적으로 스크린으로부터 45도 각도로 떻어져 있는 어느 지점을 가리키고 있는 z축을 가지고 있다는 의미입니다.

이러한 사실을 염두에 두고 perspective 속성을 이해하도록 합니다.

투영점의 깊이 설정에 따른 화면의 변화(이동시의 변화)

3D 효과를 설정하는 과정에서 투영점 설정은 거의 절대적이며 똑같이 회전시키더라도 원근감의 깊이에 따라 다른 효과가 나타납니다.

요컨대 투영점을 깊게 설정하게 되면 화면에서 대상이 회전해도 보이는 데에는 약간의 효과에 그치지만, 투영점이 얕으면 가까운 곳에서 화면이 회전하는 것처럼 보이기 때문에 약간의 각도만 변경되어도 효과가 크게 나타나게 됩니다.

그리고 지금까지는 회전을 시키고 투영점을 반영하였지만 이번에는 translate 로 이동을 시키고 3D 효과가 어떻게 동작하는지 살펴보도록 하겠습니다.

다음의 코드는 z축으로 100px 만큼 이동하고 부모요소에 투영점을 반영한 예제입니다.

See the Pen 화면이동과 투영점 by jaeheekim (@jaehee) on CodePen.

만약에 요소를 움직일 때 perspective 값을 명시하지 않고 z축을 따라 100px 을 이동시킨다면 당연히 요소에 어떠한 시각적인 변화도 일어나지 않습니다.

다시 말해 z축을 따라 100px 만큼 움직이지만 거리를 가늠할 관점이 없기 때문에 분명하게 드러나지 않는 것입니다.

그래서 3D 환경을 구성하기 위해 컨테이너 요소에 perspective 를 선언하면 위와 같은 결과가 나타나게 됩니다.

위의 결과는 요소가 관찰자와 가까운 쪽으로 움직이면서 요소의 크기가 커지고 있습니다.

이는 translateZ() 함수와 perspective 속성은 동일한 축에서 동작한다는 것을 이해해야 합니다.

다음의 이미지를 살펴봅니다.

위 그림의 Z축이 관찰자 시점과 동일한 선상에 있다고 이해하면 됩니다. 

예제에서 투영점 반영이 500px 만큼 떨어진 관찰자 시점에서 요소가 100px 만큼 Z축을 따라 옮겨진 것이기 때문에 앞으로 튀어나온 것과 같은 시각적인 효과가 나타나게 되는 것입니다.

만약에 투영점 설정이 위와 같이 즉, perspective 속성이 스크린으로부터 500px 떨어진 곳에 관찰자의 위치가 설정되어 있으면서 대상 요소에 대한 Z축이 600px 만큼 이동한다면 그 요소는 "관찰자의 뒤편"에 이동하면서 위치하기 때문에 보이지 않을 것입니다.

지금까지 회전과 Z축에 대한 투영점에 대한 효과를 각각 알아보았으며 이제는 투영점이 있는 상태에서 각도를 회전(rotate)하고 이동(translate)을 동시에 적용할 경우의 효과에 대해 알아보도록 하겠습니다.

이 회전과 이동을 동시에 적용하면서 투영점을 반영할 경우에는 상당히 다른 결과가 나타나는데 재미있는 사실은 회전을 하고 이동하는 것이냐 아니면 이동을 하고 회전하는 것이냐에 따라 상당히 다른 결과차이를 보인다는 것입니다.

먼저 다음의 예제를 통해 이동을 시킨 후 회전을 할 경우에 대해 알아보도록 합니다.

See the Pen 화면이동과 투영점 #1 by jaeheekim (@jaehee) on CodePen.

위 예제의 버튼을 클릭하여 결과를 확인해 보면 Y축으로 200px 만큼 이동하고 나서 회전을 하게 됩니다.

시각적인 효과는 이동하면서 회전하듯이 아니면 회전하면서 이동하는 것처럼 보이지만 실제로는 이동을 한 후 회전을 하게 되는 것입니다.

즉, 코드에 선언한 순서대로 동작하게 됩니다.

여기까지는 이해하는데 무리가 없을지 모르겠으나 다음의 예제를 확인해 보면 갸우뚱 거릴지도 모르겠습니다.

다음의 예제는 위와 같은 효과이지만 변형 효과를 위와 반대로 회전을 하고 이동하도록 2D 효과를 선언해 보도록 하겠습니다.

See the Pen 화면 이동과 투영점 #2 by jaeheekim (@jaehee) on CodePen.

위의 결과를 확인해 보면 단지 이동과 회전의 순서를 바꾸었을 뿐인데 다른 효과가 나타납니다.

이는 먼저 45도 각도로 회전을 한 후에 그 회전 축을 기점으로 Y축으로 200px 만큼 이동한 것이기 때문에 이와 같은 효과가 나타나는 것입니다.

다음의 그림을 참고하세요.

바로 위의 예제인 X축을 45도 기울인 상태에서 투영점을 반영해 보고 앞서 살펴본 Z축을 따라 이동하면 어떠한 결과가 나타나는지 살펴보도록 하겠습니다.

See the Pen pbmroq by jaeheekim (@jaehee) on CodePen.

위 결과는 먼저 45도 기울어진 상태에서 앞뒤로 움직이는 Z축 설정을 적용하였기 때문에 화면에서 앞으로 튀어나오는 것과 같은 시각적인 효과를 나타내게 됩니다.

그리고 참고로 위의 Z축에 대한 이해를 하셨다면 바로 위 예제에서 이동에 대한 Z축을 Y축으로 변경하면 perspective 인 투영점을 반영하지 않았던 결과와 다를 것이 없다는 것을 이해하실 수 있을 것입니다.

conclusion

지금까지 알아본 투영점을 가지고 화려(?)한 3D 효과를 구현할 수 있을 것입니다.

다음에는 투영점이 설정된 상태에서 안쪽 요소들에 2D 효과를 적용하여 3D 효과로 보이도록 하는 도형을 만들어 보는 시간을 가져보도록 하겠습니다.

만약 이 포스팅이 난해하다면 CSS3 의 transform, transition 등의 2D 효과에 대한 선행 학습을 하신 후 진행하시길 바랍니다.

Related Info

1. 3D 변환 테스트 페이지
2. CSS3 Animation(key frame)
3. 22

Jaehee's WebClub