Animations - Transforms and Transition

 Transform 기능 - translate 요소 이동시키기

transform을 통해 요소들을 이동시킬 수 있는데,

transform: translate(x.px, y.px) -> 양수는 아래, 오른쪽, 음수는 위 왼쪽으로 이동을 합니다.

 

 

transform 특이한 점으로 한가지는 백분율을 사용할 때 상위 컨테이너의 공간이 아니라, 요소 자체의 크기를 나타냅니다.

 Transform 기능 - scale로  요소를 줄이고 늘리기

• 독립적으로 x, y 축을 조정할 수 있다.

• height와 width 와 다른 점은 상자의 모형만 변형하는 것이 아니라 요소와 하위 요소도 변경을 한다는 것이다.

하위의 글자의 크기까지 변경이 된다.

 Transform 기능 - Rotate 로  요소 회전 시키기

• 요소를 회전시키는 기능이다. 
• 단위는 deg와 turn 이 있다. (1turn = 360 deg)

 Transform 기능 - Skew 로  요소 비스듬히 (잘 사용되지 않음)

아래와 같은 예시로 많이 사용할 수 있습니다!

skew예시

 

 Transform 기능 - 여러가지를 섞어서 활용하기

• Transform은 공백으로 구분을 통해 여러가지를 섞어 쓸 수 있습니다!

 

 Transform 기능 - inline요소에서 사용이 안됩니다!

• Transform은 인라인요소에서 사용이 불가능합니다.
• 이를 수정하고 싶으면 display : inline-block을 사용하거나 레이아웃모드(flexbox, grid)를 사용하도록 변경한다