CSS / 애니메이션 / transform / rotate - 2D 회전시키기

transform / rotate

  • transform의 rotate로 요소를 회전시킬 수 있습니다.
  • 평면에서의 회전입니다.
  • IE는 버전 10부터 지원합니다.

문법

transform: rotate( angle )
  • angle에는 각의 크기를 입력합니다.
  • 단위는 deg, rad, grad, turn 등을 사용합니다.
  • turn은 1회전, 즉 360deg를 의미합니다.

예제

  • 마우스를 올렸을 때 회전합니다. 회전하는 과정을 보기 위해 transition 속성을 추가했습니다.
  • 각이 양수인 경우 시계방향으로 회전합니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				width: 100px;
				height: 100px;
				margin: 60px auto;
				background-color: orange;
				transition: all ease 1s;
			}
			.jb:hover {
				transform: rotate( 45deg );
			}
		</style>
	</head>
	<body>
		<div class="jb"></div>
	</body>
</html>

  • 각이 음수면 반시계 방향으로 회전합니다.
.jb:hover {
	transform: rotate( -45deg );
}

  • 각이 크게 하여 빙글빙글 돌게 하는 효과를 줄 수 있습니다.
.jb:hover {
	transform: rotate( 720deg );
}

Related Posts

CSS / 선택자(Selector) / :nth-child(), :nth-last-child()

CSS / 선택자(Selector) / :nth-child(), :nth-last-child()

:nth-child(), :nth-last-child() :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자입니다. :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셉니다. 인터넷 익스플로러는 IE 9 이상에서 사용할 수 있습니다. :nth-child() :nth-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다. 문법 :nth-child( an+b ) a와 b는 정수입니다. 0과 음수도 가능합니다. n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 ...

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / font-family / 글꼴 정하는 속성

CSS / font-family / 글꼴 정하는 속성

개요 font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 font family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다. generic-family는 글꼴 유형입니다. serif : 삐침 있는 ...

CSS / 애니메이션 / transition / transition-duration - transition이 끝날 때까지 걸리는 시간을 정하는 속성

CSS / 애니메이션 / transition / transition-duration - transition이 끝날 때까지 걸리는 시간을 정하는 속성

transition-duration transition-duration로 transition이 끝날 때까지 걸리는 시간을 정합니다. IE는 버전 10부터 지원합니다. 문법 transition-duration: time| initial | inherit 기본값은 0s입니다. 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 커집니다. 첫 번째 박스는 다 커지는데 1초가 걸립니다. 두 번째 박스는 다 커지는데 0.4초가 걸립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-family: Consolas, monospace; } .jb { box-sizing: ...

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨깁니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / 짧은 밑줄 만들기

CSS / 짧은 밑줄 만들기

짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...

CSS / color / 텍스트 색 정하는 속성

CSS / color / 텍스트 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성

CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성

개요 caption-side는 표(table)의 캡션의 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값입니다. 표의 위에 캡션을 위치시킵니다. bottom : 표의 아래에 캡션을 위치시킵니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...

CSS / 메모

CSS / 메모

크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; ​} 가변폭 ...

CSS 강좌