Transform 2D - by. UXKM

  • Publishing
  • CSS
  • CSS 고급
  • Transform 2D
요약 설명

CSS의 transform 속성은 요소가 위치하는 시각적 좌표 공간(visual formatting model)을 변형할 수 있도록 해줍니다.
이 속성을 사용하면 요소를 이동(translate), 회전(rotate), 크기 변경(scale), 기울이기(skew) 등 다양한 방식으로 변형할 수 있으며, CSS3에서는 2D와 3D 변형 모두를 지원합니다.

Transform은 x, y, z 좌표 체계를 따르며, 좌표의 기준점은 브라우저 화면의 왼쪽 상단입니다.
Z축은 화면 밖에서 사용자가 바라보는 방향을 기준으로 앞/뒤 방향을 나타내며, 각 축의 화살표 방향이 양의 값, 반대쪽이 음의 값이 됩니다.

요약 설명

2D Transform은 평면상에서 요소를 변형하는 기능으로, x축과 y축 좌표 체계를 사용합니다.
좌표의 기준점은 브라우저 화면의 왼쪽 상단이며, transform 속성에 변환 함수(transform function)를 지정하여 요소를 이동(translate), 회전(rotate), 크기 변경(scale), 기울이기(skew)할 수 있습니다.

또한 matrix() 함수를 사용하면 위의 네 가지 변형을 한 번에 적용할 수 있으며, 각 변형 함수는 X축과 Y축을 개별적으로 제어하는 함수(translateX, translateY, scaleX, scaleY 등)도 제공합니다.

transform 속성은 HTML 요소에 대해 다음과 같은 동작을 제공합니다.

  1. 요소의 크기를 변경합니다.

    scale(확대/축소) : scaleX(), scaleY(), scale(x, y)

  2. 요소를 기울입니다.

    skew(비틀기,기울기) : skewX(), skewY()

  3. 요소를 움직입니다.

    translate(이동) : translateX(), translateY(), translate(x, y)

  4. 요소를 회전시킵니다.

    rotate(회전) : rotateX(), rotateY(), rotate(x, y)

  5. 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킵니다. skew() = tan()

    matrix( scaleX(), tanY(), tanX(), scaleY(), translateX(), translateY() )

2D Transform

요약 설명

transform(변형)은 CSS3에 추가된 기능 중 하나로 2D의 변형을 말합니다. 변형은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다.
일반적으로 변형(transform) 효과는 CSS transition(이동효과)와 함께 사용될 때, 또는 3D 기능들과 함께 사용될 때 진정한 효과가 나타납니다. 그렇지만 먼저 가장 기본적인 전환의 형태인 2D 전환에 대해서 이해해야 합니다.
본 섹션에서는 2D 변형(전환)에 대해 학습합니다.

CSS3 2D transform 속성은 다음과 같습니다.
  1. transform : 요소에 2D 변형(transform)을 적용합니다.
  2. transform-origin : 요소에 변형(transform)을 적용하는 변환 중심을 설정합니다.
2D transform은 프로퍼티값으로 변환함수(transform function)를 사용합니다.
변환함수는 다음과 같습니다.
  1. scale(x,y) : 요소의 크기를 주어진 배율만큼 늘리거나 줄입니다. (단위 : 0과 양수)
  2. scaleX(n) : 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄입니다. (단위 : 0과 양수)
  3. scaleY(n) : 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄입니다. (단위 : 0과 양수)
  4. skew(x축각도, y축각도) : 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울입니다. (단위 : +/- 각도(deg))
  5. skewX(각도) : 요소를 주어진 각도만큼 x축 방향으로 기울입니다. (단위 : +/- 각도(deg))
  6. skewY(각도) : 요소를 주어진 각도만큼 y축 방향으로 기울입니다. (단위 : +/- 각도(deg))
  7. translate(x,y) : 현재 위치에서 요소를 주어진 x축과 y축의 거리만큼 이동시킵니다. (단위 : px, %, em 등)
  8. translateX(n) : 현재 위치에서 요소를 주어진 x축의 거리만큼 이동시킵니다. (단위 : px, %, em 등)
  9. translateY(n) : 현재 위치에서 요소를 주어진 y축의 거리만큼 이동시킵니다. (단위 : px, %, em 등)
  10. rotate(각도) : 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킵니다. (단위 : +/- 각도(deg))
  11. matrix(n,n,n,n,n,n) : 6개의 매개변수로 모든 2D 변형 함수를 한 번에 설정합니다. (단위 : px, %, em 등)

transform 속성

  1. scale() 함수

    scale() 함수는 요소의 크기를 주어진 배율만큼 늘리거나 줄일 수 있습니다.
    값이 1이면 원래 크기를 유지하고, 1보다 크면 확대, 작으면 축소됩니다.
    부모 요소에 적용하면 하위요소까지 함께 확대/축소되므로 페이지 전체의 확대나 축소에도 사용할 수 있습니다.

    scale() 함수는 이미지를 확대하거나 축소하는 기능으로도 사용하기 때문에 보통은 이미지 갤러리 등에서 많이 사용됩니다.
    예를 들어 마우스를 오버(hover)하면 이미지가 커지는 효과 등에 사용합니다.

    transform: scale(sx, sy);
    - 만약 sy가 설정되어 있지 않다면, sx와 동일한 값으로 간주합니다.
    ex) transform: scale(2, 2) == transform: scale(2)

    transform: scaleX(sx)
    - transform: scale(sx, 1)와 같은 모습을 보여줍니다.

    transform: scaleY(sy)
    - transform: scale(1, sy)와 같은 모습을 보여줍니다.

  2. skew() 함수

    skew() 함수는 x축, y축을 기준으로 각도를 주어 모양을 변형시킵니다.
    주어진 각도가 양수이면 x, y축의 양의 방향으로, 음수이면 x, y축의 음의 방향으로 기울입니다.
    x, y축을 한번에 지정할 수 있으며, 콤마(,)로 구분하여 사용하고, x축, y축을 따로 명시하여 사용할 수도 있습니다.

    [skew() 함수]
    skew() 함수

    비틀기의 원리 예시로 가로 방향으로 비틀면 x축은 가만히 있고 y축이 비튼 각도만큼 회전하게 됩니다.
    다시 말해, skewX()를 지정하면 y축이 회전하게 됩니다.
    값이 양수면 시계 반대방향으로 회전(비틀게 되고)하고, 값이 음수면 시계 방향으로 회전(비틀게)하게 됩니다.

    transform: skew(ax, ay);
    - 요소에 x, y축을 중심으로 설정된 각도만큼 기울입니다.
    - 만약 ay값을 지정하지 않으면, y축으로는 기울임(skew) 연산이 적용되지 않습니다.
    ex) transform: skew(20deg) == transform: skewX(20deg)

  3. translate() 함수

    translate() 함수는 현재 위치에서 요소를 주어진 x축과 y축의 거리만큼 이동시킵니다.
    주어진 거리가 양수이면 기준점에서 오른쪽 방향으로, 음수이면 왼쪽 방향으로 이동합니다.

    translate() 효과는 원래의 위치를 기반으로 이동하는 것을 의미하며, 중요한 것은 원래의 위치 정보는 남아있다는 사실입니다.

    translate() 값이 하나만 있을 경우에는 가로 방향 이동만을 나타내며 세로 방향 이동은 없다고 간주합니다.

    transform: translate(tx, ty);
    - 좌표평면에서의 2D 이동(translation) 함수입니다.
    - 만약 ty값을 지정하지 않는다면, 0 값으로 가정하여 계산합니다.
    ex) transform: translate(300px) == tranform: translateX(300px)

    [translate 함수 예시]
    8번 박스를 이동시켰음에도 본래 차지(그 공간을 사용하지 않더라도)하고 있던 공간(빨간 보더 공간)은 유지합니다.
    translate 함수 예시
    요약 설명

    크롬 개발자이자 프론트 엔드 개발의 선두주자인 Paul Irish는 position 속성값과 translate() 두 가지 방법을 사용한 애니메이션에 대해 다음과 같이 언급하고 있습니다.

    ‘ top/left는 각 프레임을 그려내는 데 너무 많은 시간을 소요한다. 그 결과 약간 뚝뚝 끊어지는 듯이 전이가 이루어진다.
    반면에 translate는 요소가 GPU(RenderLayer라고 불림)상에서 자기 자신의 레이어 위에 놓여지도록 만든다.
    GPU 상에서 그 자신의 레이어 위에 놓이기 때문에 2D 전환이 훨씬 더 빠르게 진행되고 프레임 속도도 빠르다. ’

    translate() 함수와 position 과 연관된 속성인 top, left, right, bottom 의 차이
    position 속성은 요소를 컨테이너를 기준으로 움직입니다.
    translate()는 언제나 요소의 본래(자신) 위치를 기준으로 하여 새 위치를 잡게 됩니다.
    position: absolute;가 적용된 요소는 레이아웃상의 다른 요소들과 완전히 별개의 존재가 되어 형제 요소들에게 어떤 영향도 미치지 않게 됩니다.
    translate() 함수는 물리적으로 시야에 존재하는 한 요소가 본래 차지하고 있던 공간을 그대로 유지하게 됩니다.

  4. rotate() 함수

    rotate() 함수는 각도(degree), 턴(turn)을 이용해서 지정할 수 있습니다.

    요소를 자신의 원점(또는 transform-origin 속성에 설정된 지점)을 기준으로 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킵니다.
    회전의 각도가 양수이면 시계 방향으로 회전하고, 음수이면 시계 반대방향으로 회전하게 됩니다.

  5. matrix() 함수

    모든 2D transform 함수(translate, rotate, scale, skew)를 한 줄에 설정할 수 있습니다.
    이 함수는 2D 변형(transform)과 관련된 6개의 매개변수를 가집니다. matrix() 함수의 매개변수 순서는 다음과 같습니다.
    matrix( scaleX(), tanY(), tanX(), scaleY(), translateX(), translateY() )

    너비(scaleX)와 높이(scaleY)는 0부터 9까지의 수치를 사용합니다.
    1은 기본 값, 2는 두 배, 0.5는 절반이며 음수는 사용할 수 없습니다.

    매트릭스에서의 기울기는 skew() 함수를 쓰지 않고 tan() 함수를 사용하며, 0부터 9까지의 수치로 표현합니다.

    [ matrix 표 ]
    matrix 표

transform-origin 속성

transform-origin은 transform에 대한 원점을 지정하는 속성입니다.
요소의 기본 기준점을 설정할 때 사용되며, 기본 기준점은 요소의 정중앙입니다. (50%, 50% 또는 center center)
translate()는 기준점을 변경하여도 일정 거리만큼 이동하므로 의미가 없습니다.
설정값으로 %, px, top, left, bottom, right을 사용할 수 있습니다.
0, 0은 top left와 같고, 100% 100%는 bottom right과 같은 값입니다.

  1. 기본 값은 50% 50%. 즉 요소의 정중앙입니다.
  2. 값으로는 px, %, cm 등등 외에도 left, center, right, top, bottom를 쓸 수 있습니다.

2D Transform 예제

2D transform 테스트 및 요약설명

위에 설명된 transform의 속성 과 transform-origin을 직접 테스트 할 수 있습니다.
각 속성의 input값을 변경하여 마우스오버(hover) 또는 result버튼을 클릭하세요.
테스트기 출처 : http://921430km.com/2d