Transform 2D - by. UXKM

요약 설명

CSS의 transform 속성을 사용함으로써, CSS의 시각적 서식 모델(visual formatting model)의 좌표 공간을 변형시킬 수 있습니다.
해당 속성에 지정된 값에 따라 엘리먼트(element)에 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있습니다.
CSS3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공합니다.
transform 속성에서는 x, y, z 좌표 체계를 따릅니다.
CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단이 됩니다.
Z축은 입체적인 방향으로 모니터를 바라보고 있는 여러분이 있는 방향을 가리키는 좌표축입니다.
또한, 각 좌표축의 화살표 방향이 양의 방향이며, 반대쪽이 음의 방향을 가리킵니다.

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() )

4.1.1. 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() 함수(function)

    scale() 함수는 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄일 수 있습니다.
    scale() 값이 1인 경우는 해당 요소의 본래 치수를 유지하고 그 이상의 값은 크기를 늘리게 되고 그 이하의 값은 크기를 줄이게 됩니다.
    즉, scale() 함수는 1 값이 원래의 크기이고 0.5, 1.5 와 같은 배율로 지정할 수 있습니다.
    예를 들어서 scaleX() 의 값이 2(1은 100%를 의미)일 때 본래 너비가 200px인 요소는 너비가 400px로 변화게 됩니다.

    그리고 단순히 이미지만을 확대/축소하는 것이 아니라, 부모 요소에 적용하면 하위요소까지 영역을 가지는 모든 요소를 확대/축소해 주기 때문에 페이지 전체의 확대나 축소에도 적용할 수 있습니다.

    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() 함수(function)

    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() 함수(function)

    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() 함수(function)

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

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

  5. matrix() 함수(function)

    모든 2D transform 함수(function)(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% or 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 예제

4.1.2. 2D transform 테스트 및 요약설명

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