[CSS] transform, transition ( 1 )

 

문법 정리부터 하겠다 

 

 

 

transform

트렌스폼은 요소에 변화를 줄때 사용한다. 

 

 

rotate

rotate는 회전할때 사용한다 단위는 deg

 

transform : rotate( 10deg );   = 시계 방향으로 10deg만큼 회전

 

transform : rotate( 10deg );   = 반시계 방향으로 10deg만큼 회전

 

 

 

translate

translate는 위아래로 이동할때 사용한다 단위는 px

 

transform : transLateX(  50px  );  =  오른쪽으로 50px만큼 이동

 

transform : transLateX(  -50px  );  =  왼쪽으로 50px만큼 이동

 

transform : transLateY( -50px ) =  위로 50px만큼 이동

 

transform : transLateY(  50px ) =  아래로 50px만큼 이동

 

 

scale

 

정확한 단위는 모르지만 배수만큼 커지는거 같다

 

transform : scaleX( 2 ) = 가로로 2만큼 크기 조절 

 

transform : scaleY( 2 ) = 세로로 2만큼 크기 조절

 

transform : scale( x, y ) = 위에서 scaleX, scaleY를 동시에 크기 조절가능

 

 

 

 

skew

기울기를 조절할때 사용한다 단위는 rotate와 마찬가지로 deg

 

transform : skew ( 10deg ) = 왼쪽으로 10deg만큼 기움

 

transform : skew ( -10deg ) = 오른쪽으로 10deg만큼 기움

 

 

 

------------------------------------------

 

 

 

 

 

trasition

 

요소를 서서히 변경해줄때 사용한다

 

 

 

transition-duration : n ;

transition-duration : n ; = n초에 걸려서 코드를 실행해주세요

 

transition-delay: n ;

 

transition-delay: n ; = n초 후에 실행해주세요

 

transition-property: all ;

 

transition-property: all ; = 변경 하는 모든 설정에 애니메이션 실행해주세요

 

 

 

transition-timing-function : ? ;

 

transition-timing-function : ? ; =  이렇게 동작시켜주세요

 

키프레임을 사용하면 더 상세하게 할 수 있어서 필요 없을거같다.

 

 

 

 

transition

 

위에 있는 설정을 transition에 한번에 적용할 수 있다.

 

ex): transition: all 2s linear = 모든 설정을 2초에 걸려서 linear 로 실행

 

 

 

------------------------------------------

 

 

자스, 리액트 공부하면서 잊어버린것도 복습하면서 다시 생각났다.

그리고 trasform, trasition, animation, @keyframe

한번에 작성하려고 했는데 너무 양

 

이 많고 늦어서 3번에 나눠서 작성해야겠다.

 

 

1 transform , trasition

2. animation, @keyframe

 

3. 예제 2개