Home
CSS
애니메이션

transform 기준점 설정하는 방법 - transform-origin

transform-origin은 rotate(), skew() 등의 회전, 변형 속성을 사용하기 전에 회전 중심점(원점·기준점)을 지정합니다. transform, transition과 함께 사용합니다.
2 min read

transform-origin

  • transform-origin은 회전 중심점(원점·기준점)을 지정합니다.
  • transform, transition 속성과 함께 사용되는 속성입니다.

 

기본형

transform-origin: x-position | y-position | z-position
  • x-position : 가로 위치를 정합니다.
  • y-position : 세로 위치를 정합니다.
  • z-position : z축 위치를 정합니다.
  • 초기 값은 50% 50%으로 요소의 중심점이 됩니다.

 

위치 값으로 사용할 수 있는 것은 다음과 같습니다.

  • 가로 위치 값
left | center | right | 백분율 | 길이
  • 세로 위치 값
top | center | bottom | 백분율 | 길이
  • z축 위치 값
길이(length)

 

예제

rotate 속성을 사용하기 전에 기준점을 지정합니다.

 

 

scale 속성을 사용하기 전에 기준점을 지정합니다.

 

같이 보면 좋은 글

 

기타 CSS 참조

애니메이션으로 돌아가기

You may like these posts

  • 뒷쪽에서 앞면이 보이게 하는 방법 - backface-visibility
    backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.   기본형 backface-visibility: visible | hidden visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않…
  • 서서히 변화시키는 방법 - transition
    transition 트랜지션(transition)은 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 말합니다. 스타일이 바뀌는 시간을 조절하면 애니메이션 효과도 낼 수 있습니다. CSS3 트랜지션을 실행하기 위해서 다음과 같은 여러 속성이 사용됩니다. 각 속성에 대한 자세한 대용은 이어서 …
  • transform 이동 효과 주는 방법 - translate
    transform / translate transform의 translate로 요소를 이동할 수 있습니다. 평면(2D)에서의 이동입니다.   기본형 transform : translate ( value ); value에 값을 입력합니다. 단위는 px, %, em 등을 사용합…
  • 애니메이션 - animation
    CSS3의 animation 속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있습니다. 목차 @keyframes animation-name animation-duration animation-timing…
  • transform 기준점 설정하는 방법 - transform-origin
    transform-origin transform-origin은 회전 중심점(원점·기준점)을 지정합니다. transform, transition 속성과 함께 사용되는 속성입니다.   기본형 transform-origin: x-position | y-position | z-position …
  • 원근감, 거리감 기준점 설정하는 방법 - perspective-origin
    perspective-origin perspective-origin 속성으로 요소와의 원근감(거리감) 기준점을 설정합니다. perspective 속성과 함께 사용합니다.   기본형 prespective-origin : x-position | y-position x…

Post a Comment