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

  • 표 제목의 위치를 정하는 방법 - caption-side
    표 제목은 <caption> 태그를 이용해 캡션으로 표시합니다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있습니다. caption-side caption-side는 요소의 캡션의 위치를 정하는 속성입니다. &nb…
  • 표의 배경색 정하는 방법
    배경색을 만드는 속성 배경 색상은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 배경색을 적용할 수 있습니다.   예제 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. …
  • 표 크기 고정시키는 방법 - table-layout
    표 크기 고정시키는 방법 표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 250px인 간단한 표입니다. 표 안의 내용이 길면 줄바꿈되면서 크기를 유지합니다. <table> <tr> …
  • 표의 크기 정하는 방법
    표의 크기 정하는 방법 표와 셀의 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다.   예제 다음은 테두리만 추가한 간단한 표입니다. 여기에 CSS을 추가해서 크기를 변경해보도록 하겠습니다. <…
  • display 속성으로 표 만드는 방법 - table, table-row, table-cel
    display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. display 속성값 중 표와 관련된 값들 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표…
  • 비어있는 표의 테두리 숨기는 방법 - empty-cells
    border-collapse:separate를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용해 내용이 없는 빈 셀들의 표시 여부를 지정합니다. empty-cells empty-cells은 표에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다.   기본형 empt…

Post a Comment