Home
CSS
애니메이션

transform 회전 효과 주는 방법 - rotate

transform의 rotate로 요소를 회전시킬 수 있습니다. 평면(2D)에서의 회전입니다.
2 min read

transform / rotate

  • transform의 rotate로 요소를 회전시킬 수 있습니다.
  • 평면(2D)에서의 회전입니다.

 

기본형

transform : rotate ( angle );
  • angle에는 각의 크기를 입력합니다.
  • 단위는 deg, rad, grad, turn 등을 사용합니다.

 

예제

  • 회전하는 과정을 보기 위해 transition 속성을 추가했습니다.
  • 입체적인 3D 효과를 주려면 perspective 속성을 이용합니다. 원근감을 표시할 수 있도록 관찰자 시점(위치)의 거리를 지정합니다.

 

같이 보면 좋은 글

 

기타 CSS 참조

애니메이션으로 돌아가기

You may like these posts

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

Post a Comment