CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다.

IE는 버전 10 이상부터 지원한다는 것에 주의합니다.

transform / rotate

  • transform의 rotate로 요소를 회전시킬 수 있습니다.

문법

transform: rotate( angle )
transform: rotateX( angle )
transform: rotateY( 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 );
}

  • rotateX는 가로를 축으로 하여 회전합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .jb-box {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        padding: 20px;
        background-color: orange;
        transition: all 0.5s linear;
      }
      .jb-circle {
        width: 100%;
        height: 100%;
        border: 10px solid #ffffff;
        border-radius: 50%;
      }
      .jb-box:hover {
        transform: rotateX( 180deg )
      }
    </style>
  </head>
  <body>
    <div class="jb-box">
      <div class="jb-circle"></div>
    </div>
  </body>
</html>

  • rotateY는 세로를 축으로 하여 회전합니다.
.jb-box:hover {
  transform: rotateY( 180deg )
}

transform / translate

  • transform의 translate로 요소를 이동시킬 수 있습니다.

문법

transform: translateX( 50px )

오른쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 왼쪽으로 이동합니다.

transform: translateY( 50px )

아래쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 위쪽으로 이동합니다.

transform: translate( 50px, 50% )

오른쪽으로 50px, 아래쪽으로 50% 이동합니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .jb-box {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        padding: 20px;
        background-color: orange;
        transition: all 0.5s linear;
      }
      .jb-circle {
        width: 100%;
        height: 100%;
        border: 10px solid #ffffff;
        border-radius: 50%;
      }
      .jb-box:hover {
        transform: translateX( 50px )
      }
    </style>
  </head>
  <body>
    <div class="jb-box">
      <div class="jb-circle"></div>
    </div>
  </body>
</html>

.jb-box:hover {
  transform: translateX( -50px )
}

.jb-box:hover {
  transform: translateY( -50px )
}

.jb-box:hover {
  transform: translate( 50px, 50% )
}

transform / scale

  • transform의 scale로 요소를 확대 또는 축소할 수 있습니다.
  • 1보다 큰 수는 확대, 1보다 작은 수는 축소입니다.

문법

transform: scale( 2.0 );

가로와 세로 모두 2배 확대합니다.

transform: scale( 2.0, 1.5 );

가로로 2배, 세로로 1.5배 확대합니다.

transform: scaleX( 2.0 );

가로로 2배 확대합니다.

transform: scaleY( 1.5 );

세로로 1.5배 확대합니다.

예제

  • 마우스를 올렸을 때 확대됩니다. 그 과정을 보기 위해 transition 속성을 추가했습니다.
  • 마우스를 올리면 가로로 1.5배 확대합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .jb-box {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        padding: 20px;
        background-color: orange;
        transition: all 0.5s linear;
      }
      .jb-circle {
        width: 100%;
        height: 100%;
        border: 10px solid #ffffff;
        border-radius: 50%;
      }
      .jb-box:hover {
        transform: scaleX( 1.5 )
      }
    </style>
  </head>
  <body>
    <div class="jb-box">
      <div class="jb-circle"></div>
    </div>
  </body>
</html>

  • 세로로 1.5배 확대합니다.
.jb-box:hover {
  transform: scaleY( 1.5 )
}

  • 가로 세로 모두 1.5배 확대합니다.
.jb-box:hover {
  transform: scale( 1.5 )
}

  • 가로로 2.0배, 세로로 1.5배 확대합니다.
.jb-box:hover {
  transform: scale( 2.0, 1.5 )
}

transform / skew

  • transform의 skew로 요소를 비틀 수 있습니다.

문법

transform: skewX( 30deg );

가로 방향으로 30도 비틉니다.

transform: skewY( 30deg );

세로 방향으로 30도 비틉니다.

transform: skewX( 30deg, 60deg );

가로 방향으로 30도, 세로 방향으로 60도 비틉니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .jb-box {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        padding: 20px;
        background-color: orange;
        transition: all 0.5s linear;
      }
      .jb-circle {
        width: 100%;
        height: 100%;
        border: 10px solid #ffffff;
        border-radius: 50%;
      }
      .jb-box:hover {
        transform: skewX( 30deg )
      }
    </style>
  </head>
  <body>
    <div class="jb-box">
      <div class="jb-circle"></div>
    </div>
  </body>
</html>

.jb-box:hover {
  transform: skewY( 30deg )
}

.jb-box:hover {
  transform: skew( 30deg, 60deg )
}

Related Posts

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...

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 / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...

CSS / z-index / 요소의 수직 위치 정하는 속성

CSS / z-index / 요소의 수직 위치 정하는 속성

z-index position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 예제 1 세 개의 div 요소를 겹치게 배치했습니다. 코드 상 나중에 입력한 것일 수록 위로 올라옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 100px; height: 100px; position: absolute; } div.x { background-color: #2196F3; top: ...

CSS / 표(table) 꾸미기 / 정렬하기

CSS / 표(table) 꾸미기 / 정렬하기

표와 관련된 정렬 표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 표 : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬 입니다. <!doctype html> <html lang="ko"> <head> ...

CSS / Flex / flex-direction

CSS / Flex / flex-direction

flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: ...

CSS / Flex / order / 아이템의 순서 정하는 속성

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CSS / border-radius / 테두리 둥글게 만드는 속성

CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...

CSS / 고정형 레이아웃 만들기

CSS / 고정형 레이아웃 만들기

레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...

CSS 강좌