변환(1)

transform

transform의 속성은 값으로 여러가지 변환 함수를 띄워쓰기로 구분하여 다양하게 활요할 수 있다.

transform의 속성 값으로 사용할 수 있는 변환 함수의 종류로는 원근법, 이동, 크기, 회전, 기울임을 통제하는 변환 함수들이 있다.

 

transform에 사용할 수 있는 변환 함수는 크게 2차원 변환함수, 3차원 변환함수 이렇게 2가지 종류로 나뉜다. 

translate는 이동을 담당하는 변환 함수로 인자로 x축, y축으로 얼만큼 이동시킬 것인지 명시해주어야 하며 단위는 px(픽셀)이다.

scale 함수는 요소의 크기를 늘려주는 변환 함수로 인자로 몇 배를 늘릴 것인지 명시해주며 단위는 없다.

보통 한 쪽 방향으로만 크기를 키우는 경우는 잘 없기 떄문에 scaleX, scaleY 함수는 잘 사용하지 않는다.

rotate는 회전을 담당하는 함수로 몇 도만큼 회전시킬 것인지를 인자로 명시해주며 단위는 각도를 나타내는 degree를 줄여 deg를 사용한다.

skew함수는 기울임을 담당하는 함수로 몇 도만큼 기울일 것인지를 인자로 명시해주며 단위는 역시 deg를 사용한다.

 

matrix 함수를 이용해서 모든 변환 효과를 나타낼 수 있지만 인자가 무려 6개로 사용자들이 사용하기 매우 힘들기 때문에 사용하기 쉽도록 앞서 설명한 개별 함수들을 만들어 두었다. 그러나 브라우저가 실제 변환 함수를 적용할 때에는 matrix 함수로 변환하여 사용한다.

=> 사용자가 matrix 사용하는 경우는 없다고 봐도 무방하다.

 

 rorateX와 rotateY 함수는 x축과 y축에 대한 함수이기 때문에 2차원 함수로 생각할 수 있지만 3차원 변환 함수이다.

rotateX는 x축을 축으로 하여 3차원으로 회전시키며, rotateY는 y축을 축으로 하여 3차원으로 회전시킨다.

perspective는 원근 거리를 명시하는 원근법 함수이다.

 

rotate 함수

 rotate 함수는 2차원 변환 함수이기 때문에 요소를 2차원 방향으로 인자로 명시한 각도만큼 기울이는 것을 확인할 수 있다.

rotateX와 rorateY 함수는 3차원 변환 함수이지만 딱히 3차원으로 회전한 것 같다는 느낌은 느낄 수 없는데, 이는 원근법이 적용되지 않았기 때문에 2차원으로 회전한 것 처럼 보인다.

 

이처럼 원근법을 적용한 후 확인해 보면 rotateX와 rotateY 함수는 명백히 3차원 변환 함수임을 확인할 수 있다.

원근법 함수의 인자로 입력하는 값은 원근 거리를 나타낸다.
특정한 물체를 얼만큼 가까이서 보느냐를 나타내고 이 값이 작을수록 가까이에서 본다는 의미이므로 왜곡이 더 심하게 발생한다.

원근법 함수는 transfrom 속성 값 중 제일 앞에 작성해야 한다는 것을 주의해야 한다.

3번째 그림처럼 x, y 방향으로 동시에 회전하여 사용하는 경우는 극히 드물지만 가능은 하다는 거 알아두자.

 

skew 함수를 사용하여 요소를 x축 또는 y축 방향으로 기울일 수 있다.

잘 사용되지 않을 것 같지만 의외의 순간에 사용될 수 있으니 이러한 기능이 있다는 것 기억해두자!

 

실제 코드 입력

사진에서와 같이 원근법을 적용한 후 x축 방향으로 45도 만큼 회전한 후 x축 방향으로 100px 만큼 이동시켜 보면 화면에 나타난 요소는 어딘가 불균형한 것을 느낄 수 있다.

마치 옆에서 요소를 보고있는 것 같은 느낌을 준다.

원근 거리는 요소의 원래 위치에서 정가운데를 바라보는 것으로 측정되기 때문에 요소의 위치를 옮기면 옆에서 보는 것 처럼 화면에 묘사가 된다.