Home
CSS
애니메이션

transform 이동 효과 주는 방법 - translate

transform의 translate로 요소를 이동할 수 있습니다. 평면(2D)에서의 이동입니다.
2 min read

transform / translate

  • transform의 translate로 요소를 이동할 수 있습니다.
  • 평면(2D)에서의 이동입니다.

 

기본형

transform : translate ( value );
  • value에 값을 입력합니다.
  • 단위는 px, %, em 등을 사용합니다.

 

예제

  • 평면에서 이동이기 때문에 translateZ 속성은 움직이지 않는 것처럼 보입니다. perspective 속성으로 원근감을 주면 움직이는 과정을 볼 수 있습니다.

 

같이 보면 좋은 글

 

기타 CSS 참조

애니메이션으로 돌아가기

You may like these posts

  • Grid 행과 열의 갯수 설정하는 방법 - grid-template-columns, grid-template-rows
    grid-template-columns grid-template-columns 속성으로 열의 개수와 폭을 정합니다. 기본값은 none으로, 열을 만들지 않습니다. 속성 값의 개수가 열의 개수이고, 각 속성값이 열 너비입니다. 예를 들어 속성값이 100px 50% auto라면 3열이 만들어집니다. 1열의 …
  • Grid 사이 간격 정하는 방법 - grid-column-gap, grid-row-gap, grid-gap
    아이템 사이의 간격 정하기 grid-column-gap, grid-row-gap, grid-gap은 그리드 아이템 사이의 간격을 정하는 속성입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <div class="containe…
  • Flex 플렉스 적용하는 방법 - display
    플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어주어야 합니다. 즉, 배치하려는 웹 요소들이 있다면 그 요소들을 감싸는 부모 요소를 만들고 그 부모 요소를 플렉스 컨테이너로 만들어야 합니다. 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 플렉스 박스 형태…
  • Grid 행 높이 같게 만드는 방법 - grid-auto-rows
    grid-auto-rows 그리드에서 열 개수는 grid-template-columns로 정합니다. 정해진 열 개수를 넘어가면 행이 바뀌고 높이는 행마다 다르게 정해집니다. 예를 들어 다음은 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <…
  • Flex 아이템의 배열 방향 정하는 속성 - flex-direction
    flex-direction 플렉스 컨테이너를 지정했다면 플렉스 항목을 배열할 방향을 알려주어야 합니다. flex-direction 속성을 사용해 플렉스 항목의 주축을 가로(row)로 할지, 세로(column)로 할지 지정합니다.   기본형 flex-direction : row | r…
  • Grid 그리드 적용하는 방법 - display
    display: grid 그리드(Grid)는 컨테이너(Container)와 아이템(Item)으로 구성됩니다. 아래는 그리드를 위한 간단한 예제입니다. <div class="container"> <div class="item">…

Post a Comment