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 / 변수 사용하기

CSS / 변수 사용하기

CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다. 변수 사용 property: var( --variable-name ) 예제 기본 변수 --my-color-1을 red로 설정하고 사용합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root ...

CSS / 상속(inheritance)

CSS / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...

CSS / placeholder의 색, 글자 모양 등 꾸미기

CSS / placeholder의 색, 글자 모양 등 꾸미기

placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다. 다음은 꾸미기 전의 input과 textarea입니다. <!doctype html> <html lang="ko"> <head> ...

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로 드롭다운(Dropdown) 메뉴 만들기

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...

CSS / linear-gradient - 선형 그라데이션 효과 만들기

CSS / linear-gradient - 선형 그라데이션 효과 만들기

linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 기본 문법 linear-gradient( direction, color1, color2, …, color3 ) direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 ...

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> ...

CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법

CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법

순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } ...

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...