<HTML/CSS> Transform 2 : Perspective와 translate축 이해

CSS의 Transform의 내역은 Rock's Easy Web을 기본으로 공부하고 있습니다. 

 

이번 시간에는 Transform을 사용하면서 바라보는 관점인 Perspective에 대한 이해와 3개의 축인 x, y, z축에 변화를 주어 어떻게 형태가 변하는지 이해해 보는 시간을 갖도록 하겠습니다. 

 

역시 HTML은 placeimg.com에서 더미이미지를 활용하도록 하겠습니다. 

 

 

이전시간 translateX를 사용하여 x축으로 이동하는 연습을 해 보았습니다. 이번에는 y추곽 z축을 이동하면서 transform의 개념을 잡아 보겠습니다. 

 

1. Translate (x, y, z 축 변화)

 

y축으로 움직여 보면 다음과 같이 할 수 있습니다. 

 

 

 

상기 이미지처럼 아래로 100px 이동하였습니다. 첫번째 법칙을 정리한 왼손법칙에서 y축을 이해하시면 됩니다. x축과 y축을 동시에 적용하려면 다음과 같이 콤마(,)를 사용하여 사용하면 됩니다. 

 

 

그렇다면 z축을 변경시키고 싶다면 다음과 같이 사용할 수 있겠죠.

 

 

그런데 화면상에는 아무 변화가 없습니다. 이는 어디서 보는가의 관점에 대한 문제입니다.

 

2. Perspective (기준 관점)

 

이를 해결하기 위하여 HTML구조를 보면 img와 span요소는 div태그안에 있습니다. 즉, 부모태그인 div태그를 기준관점으로 본다면 z축의 변화를 느낄 수 있습니다. 

 

다음과 같이 div태그에 perspective를 지정하고 다시 본다면 다음과 같이 z축으로 움직였다고 확인할 수 있습니다. 

 

 

 

상기 브라우저 결과를 보면 위로 올라오긴 하는데 약간 왼쪽 위로 약간 커져보이는 효과를 줍니다, 입니다. 100px 가까이 오는 효과를 보고 있는데 정확히 직각으로 올라오지는 않지요. 이는 중심설정이 그림의 가운데로 기본설정이 되어 있기 때문입니다. 

 

확대축소를 브라우저상에서 바로 보기 위해서는 중심축(바라보는 시선의 기준)을 왼쪽 상단에 맞추면 됩니다. 

 

 

이렇게 설정하면 바로 올라오는 것처럼 만들 수 있습니다. 

 

반대로 줄어들게 만들고 x, y축도 동시에 이동해 보면 다음과 같습니다. 

 

 

 

상기 CSS에서 x, y, z축 동시에 적용하는 속성은 translate3d입니다. 

 

3. scale (확대 축소)

 

완전히 전공하는 내용이면 모르겠지만 기초적인 이론중에 scale이 있습니다. scale은 확대나 축소를 만들 수 있는데 transform과 같이 사용할 경우 scale자체도 같이 효과를 주게 됩니다. 

 

글로는 어려우니 예시를 가지고 설명하도록 하겠습니다. 

 

 

 

상기 그림을 보면 z축으로 100px가까워졌고 사이즈도 2배로 커진것을 볼 수 있습니다. 

 

관련된 확인은 다음 코드펜에서 확인할 수 있습니다. 

See the Pen transform1-1 by skkim0303 (@skkim0303) on CodePen.