Transform에 관하여

See the Pen ExZENGy by minsucoding (@minsucoding) on CodePen.

---

 

 

오늘 알려 드릴 속성은 transform 속성이에요
이 속성은 우선 단어 뜻 그대로 '변환'을 해주는 속성이에요

위에 예제에 마우스를 hover해보시면 다양한 이펙트들이 발생하게 되는데 모두 transform 속성을 주었기 때문이에요

가장 처음에 scale은 요소의 크기를 결정해주는 속성이고

transition은 요소가 변환하는데 걸리는 시간을 결정해주는 속성이에요

translate는 요소의 위치를 변환하는 속성이에요

rotate는 요소의 각도를 변환하는 속성입니다 이 속성을 사용할때 사용되는 단위는 각도이고 표기로는 'deg'를 사용합니다

마지막 skew는 요소의 각도와 기울기를 지정해주는 속성이에요 (x축기울기 , y축기울기)

 

 

---