transform

transform은 요소를 여러 가지 방법으로 변형시킵니다. 자식 요소와 함께 변하기 때문에 자식 요소들을 신경쓸 필요가 없어서 편리합니다. 여기서 알아볼 변형 속성은 translate, scale, rotate, skew입니다.

 

translate : translate는 요소를 정한 값만큼 이동시킵니다. translate(X축, Y축) 형식으로 지정합니다.

              위 코드는 평소에는 원래 위치에 있다가, 마우스를 올릴 때(:hover)ex) X 20px, Y 40px를 이동시킵니다.

 

scale : scale는 요소의 사이즈를 결정합니다. '원래 사이즈의 몇 배' 이런 식이라 width, height와는 차원이 다르며, 자식           요소까지 함께 변한다는 특성이 있습니다. 단위는 배이고 scale(X, Y)와 같이 사용함. 위 코드에서는 요소 사이즈가

         가로는 기존 width(X)의 2배, 세로는 기존 heigth(Y)의 2.5배로 늘어난다.

 

rotate : rotate는 요소의 회전을 결정합니다. 각도를 나타내는 deg 단위를 씁니다.

 

skew : skew는 요소의 왜곡을 결정합니다. skew(X, Y)와 같이 사용함. 단위는 deg로 정해진 각도만큼 비뚤게함.

 

transition : transition을 사용하면 요소가 변할 때 변하는 과정을 보여줍니다. 쉽게 말하면 애니메이션 효과.

 

property 자리에는 효과를 적용할 속성을 지정합니다. 예를 들어, width가 변하는 과정을 보여주고 싶으면 width를 쓰면 됩니다. 모든 속성을 지정할 때는 all을 씁니다.

 

duration 자리에는 지속 시간을 지정합니다.

 

timing-function 자리에는 효과의 속도 변화 유형을 지정합니다. liner - 딱딱함(등가속도), ease - 부드럽게 시작하고 빨라진 뒤 부드럽게 끝남(아무것도 안적으면 이게 기본임), ease-in - 부드럽게 시작함, ease-out - 부드럽게 끝남, ease-in-out - 부드럽게 시작하고 부드럽게 끝남. 그 밖에 cubic-bezier(n, n, n, n) 같은 고급 기술도 있습니다.

 

delay 자리에는 지연 시간을 지정합니다.