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 / 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 / text-shadow / 글자에 그림자 효과를 주는 속성

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

개요 text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 ...

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앱니다. x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 ...

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 / 기초 / 문법

문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...

CSS / opacity / 요소를 투명하게 만드는 속성

CSS / opacity / 요소를 투명하게 만드는 속성

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...

CSS / text-align / 문단 정렬하는 속성

CSS / text-align / 문단 정렬하는 속성

text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬입니다. right : 오른쪽 정렬입니다. center : 가운데 정렬입니다. justify : 양쪽 정렬입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 맞추기 ...

CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...