Home
CSS
애니메이션

transform 비틀기 효과 주는 방법 - skew

transform의 scew로 요소를 비틀기 또는 기울이기를 할 수 있습니다. 평면(2D)에서의 이동입니다.
1 min read

transform / skew

  • transform의 skew로 요소를 비틀기 또는 기울이기를 할 수 있습니다.
  • 평면(2D)에서의 이동입니다.

 

기본형

transform : skew ( value );
  • value에 값을 입력합니다.
  • 단위는 deg, rad, grad 등을 사용합니다.

 

예제

  • X 축에 + 각도는 우측으로 , - 각도는 좌측으로 기울입니다.
  • Y 축에 + 각도는 아래쪽으로, - 각도는 윗쪽으로 기울입니다.

 

같이 보면 좋은 글

 

기타 CSS 참조

애니메이션으로 돌아가기

You may like these posts

  • 서서히 변화시키는 방법 - transition
    transition 트랜지션(transition)은 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 말합니다. 스타일이 바뀌는 시간을 조절하면 애니메이션 효과도 낼 수 있습니다. CSS3 트랜지션을 실행하기 위해서 다음과 같은 여러 속성이 사용됩니다. 각 속성에 대한 자세한 대용은 이어서 …
  • transform 기준점 설정하는 방법 - transform-origin
    transform-origin transform-origin은 회전 중심점(원점·기준점)을 지정합니다. transform, transition 속성과 함께 사용되는 속성입니다.   기본형 transform-origin: x-position | y-position | z-position …
  • transform 회전 효과 주는 방법 - rotate
    transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 평면(2D)에서의 회전입니다.   기본형 transform : rotate ( angle ); angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, tur…
  • 원근감, 거리감 기준점 설정하는 방법 - perspective-origin
    perspective-origin perspective-origin 속성으로 요소와의 원근감(거리감) 기준점을 설정합니다. perspective 속성과 함께 사용합니다.   기본형 prespective-origin : x-position | y-position x…
  • transform 확대, 축소 효과 주는 방법 - scale
    transform / scale transform의 scale로 요소를 확대 또는 축소할 수 있습니다. 평면(2D)에서의 확대 또는 축소입니다.   기본형 transform : scale ( value ); value에 값을 입력합니다. 1은 원래의 크기이고 0.5, 1.5…
  • transform 비틀기 효과 주는 방법 - skew
    transform / skew transform의 skew로 요소를 비틀기 또는 기울이기를 할 수 있습니다. 평면(2D)에서의 이동입니다.   기본형 transform : skew ( value ); value에 값을 입력합니다. 단위는 deg, rad, grad 등을 사용…

Post a Comment