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 / border / 테두리 만드는 속성

CSS / border / 테두리 만드는 속성

개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...

CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성

CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성

q 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은 큰따옴표로 감싸는 것입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> </head> <body> <h1>Lorem <q>Ipsum</q> Dolor</h1> </body> </html> 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 것이 quotes 속성입니다. 예를 들어 ...

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 / 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 / Flex / 정가운데 배치하기

CSS / Flex / 정가운데 배치하기

justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / ul, ol 가운데 정렬하는 방법

CSS / ul, ol 가운데 정렬하는 방법

목록의 내용만 가운데 정렬하기 목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. ul { text-align: center; } 목록 요소 자체를 가운데 정렬하기 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다. ul { width: 300px; margin-left: auto; ...

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 / 표(table) 꾸미기 / 크기 정하기

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

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...