트랜스폼(transform) [Jquery, CSS]

공부/Jquery,CSS  2016.03.19 01:25

안녕하세요. 명월입니다.
이번 포스트는 CSS의 트랜스폼(transform)에 대해서 공부하겠습니다.


트랜스폼은 요소를 3D 적으로 회전, 확대, 축소하는 스타일을 말합니다. 이야기가 어려우면 아래의 모습과 같은 형태라고 보면 됩니다.


안녕하세요.
명월일지입니다.





트랜스폼의 속성은 transform, transform-origin, perspective, transform-style, perspective-origin, backface-visibility의 총 6가지의 속성을 가지고 있습니다.
저는 transform, transform-origin를 예전부터 잘 알고 있는 속성이네요.. 다른 속성도 찾아 봤지만 사용법이 너무 어려워서 사용하기가 까다로울 것 같습니다...


먼저 transform의 속성은 옵션을 두세 개를 중첩에서 사용할 수도 있습니다.속성으로는 matrix, transrate, scale, rotate, skew가 있고 이 옵션은 각각 3d라는 z 좌표까지 표시할 수 있는 옵션이 있습니다.
예를 들면 transrate는 이동옵션인데 transrate(x,y)는 가로로 x만큼 세로로 y만큼 이동하라 입니다. 그런데 여기에 transrate(x,y,z)를 하면 z축으로도 움직이는 것입니다.


관련 예제 - transrate 예제


저도 이해가 되지 않는 부분이 있어서 설명하기가 무척 어렵네요..일단 간단하게 설명하면 matrix는 총 6개의 좌표에 변형하는 것인데 (x축크기,x축비틀기,x축 이동,y축크기y축비틀기,z축비틀기) 입니다.
모든 걸 합쳤다고 보시면 됩니다. transrate는 이동, scale는 크기, rotate는 회전, skew는 비틀기입니다.
관련 예제를 링크하겠습니다. 참고해 주세요.


관련 예제 - transrate 예제


그럼 저도 관련 예제 하나 만들어 보도록 하죠...



명월일지
안녕하세요

위 버튼을 눌러보시면 사각형 박스가 위에서 열리는 것처럼 보이는 효과입니다. 어디선가 메뉴를 저런 효과로 사용한 블로글르 본 적이 있는데 생각이 나서 흉내 내봤습니다.
블로그를 하시는 많은 분이 트랜스폼은 많이 사용하시는데 저는 화려한 걸 좋아하지 않아 잘 사용하지 않는 스타일입니다.
그래도 가끔 포스트 내용 중에 강조할 게 있을 때는 적절히 사용하는 것도 괜찮겠네요.
이번 포스트를 다 작성하고 보니 내용이 부실해 보이네요... 항상 그랬지만.. ㅎㅎ 그래도 오늘은 특히 심하네요. 트랜스폼은 저도 모르는 게 많고 크게 관심도 없을 뿐더라 관련 자료를 찾아 려 해도 자료가 많지 않네요.....



댓글 0개가 달렸습니다.
댓글쓰기