CSS Reference / transform

1 개요
2 문법
3 예제

개요

CSS의 transform 속성은 HTML 요소에 2D 또는 3D 변형 효과를 줄 때 사용하는 속성입니다. 위치 이동, 회전, 크기 조절, 기울이기 등의 변형을 적용할 수 있습니다.

문법

transform: none | transform-functions | initial | inherit

none
transform-functions : 변형 함수입니다. 여러 함수를 동시에 사용할 수 있습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속 받습니다.

주요 변형 함수는 다음과 같습니다.

translate

translate 함수는 요소를 이동합니다.

translate( x, y ) : 요소를 가로 방향으로 x만큼, 세로 방향으로 y만큼 이동합니다.
translateX( x ) : 요소를 가로 방향으로 x만큼 이동합니다.
translateY( y ) : 요소를 세로 방향으로 y만큼 이동합니다.

rotate

rotate 함수는 요소를 회전시킵니다.

rotate( angle ) : 각이 양수인 경우 시계방향으로, 음수이면 반시계방향으로 회전합니다.
rotateX( angle ) : 가로를 축으로 하여 회전합니다.
rotateY( angle ) : 세로를 축으로 하여 회전합니다.

scale

scale 함수는 요소를 확대 또는 축소합니다.

scale( x, y ) : 요소의 크기를 가로 방향으로 x배, 세로 방향으로 y배로 확대 또는 축소합니다.
scaleX( x ) : 요소의 크기를 가로 방향으로 x배 확대 또는 축소합니다.
scaleY( y ) : 요소의 크기를 세로 방향으로 y배 확대 또는 축소합니다.

skew

skew 함수는 요소를 기울입니다.

skew( x, y ) : 요소를 가로 방향으로 x만큼, 세로 방향으로 y만큼 기울입니다.
skewX( x ) : 요소를 가로 방향으로 x만큼 기울입니다.
skewY( y ) : 요소를 가로 방향으로 y만큼 기울입니다.

예제

transform / translate

요소 위에 마우스를 올리면 오른쪽으로 50px 이동합니다.

<!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 )
}

아래쪽으로 50px 이동합니다.

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

가로 방향과 세로 방향으로 동시에 이동합니다.

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

transform / rotate

요소 위에 마우스를 올리면 시계 방향으로 45도 회전합니다.

<!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 / scale

요소 위에 마우스를 올리면 가로로 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

요소 위에 마우스를 올리면 가로 방향으로 기울입니다.

<!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 )
}