css transform 2

[CSS3] transform(3d변형) : 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기

바로 전 단계에서 transform의 다양한 속성들을 활용하여 평면상에서의 모양을 변형하는 법을 배웠습니다. 이번에는 평면이 아닌 입체적인 공간에서의 요소 변형법을 알아보겠습니다. 기존의 transform 속성들 중 3d로의 변형이 가능한 속성은 translate와 rotate입니다. (1) perspective : 원근감 설정하기 흔히 2d라고 하는 평면공간을 입체적인 3d 공간으로 바꾸는 제일 중요한 요소가 무엇일까요? 기존 x축, y축에 z축을 추가했을 시에 비로소 평면에서 입체적인 공간으로 바뀝니다. 지금부터 우리가 다뤄볼 속성이 바로 이 z축에 해당합니다. 사람의 눈에 더욱 자연스러운 입체공간을 구현하기 위해서는 원근감이라는 요소를 추가해야 하는데 브라우저상에 원근감을 설정해주는 요소가 바로 p..

[CSS3] transform(2d변형) : 특정 요소의 모양을 평면상에서 자유롭게 변형하기

기존 웹 표준에서 모든 HTML 요소의 모양은 사각형이었으며 해당 모양을 변형할 수 있는 방법이 없었지만 CSS3으로 넘어오면서 포토샵의 기능과 비슷한 변형 속성이 대거 추가되었습니다. 따라서 기존에는 불가능하던 다양한 디자인 기법이 순수 CSS 기술만으로도 구현이 가능해졌습니다. 이러한 CSS3 기능의 추가는 jQuery와의 결합을 통해 더욱 역동적이고 인터랙티브한 웹 사이트 제작을 도와줍니다. 여기서는 transform의 속성 중 평면상에서 구현가능한 기능들을 위주로 학습하겠습니다. transform의 경우에는 속성도 다양하고 표기법이 다소 익숙하지 않을 수 있으니 해당 예제를 차분히 따라 해보면서 천천히 눈에 익히기 바랍니다. (1) translate : x축이나 y축으로 이동 translate는 ..