8. CSS3 변형

1. 키워드

2D Transform
3D Transform
전환(Transition)
애니메이션(Animation)

2. 2D Transform

1) 변형

CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있다.

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

1] 해당 요소를 움직인다.

2] 해당 요소를 회전시킨다.

3] 해당 요소의 크기를 변경한다.

4] 해당 요소를 기울인다.

5] 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킨다.

CSS3에서는 transform 속성을 사용하여 2D 변형과 3D 변형을 모두 제공한다.

2) CSS 좌표 체계

transform 속성에서 사용하는 x, y, z좌표는 다음 그림과 같은 좌표 체계를 따른다.

CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단이 된다.
Z축은 입체적인 방향으로 모니터를 바라보고 있는 여러분이 있는 방향을 가리키는 좌표축이다.
또한, 각 좌표축의 화살표 방향이 양의 방향이며, 반대쪽이 음의 방향을 가리킨다.

3) 2D 변형

2D 변형을 위해 제공되는 메서드는 다음과 같다.

1] translate()

2] rotate()

3] scale()

4] skew()

5] matrix()

(1) `translate()` 메서드

translate() 메서드는 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킨다.
주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킨다.

<style>
  #trans {
    -webkit-transform: translate(100px, 50px);
    -ms-transform: translate(100px, 50px);
    transform: translate(100px, 50px);
  }
</style>

(2) `rotate()` 메서드

rotate() 메서드는 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킨다.
주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전시킨다.

<style>
  #rotate {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
</style>

(3) `scale()` 메서드

scale() 메서드는 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄인다.
주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄인다.

<style>
  #scale_inc {
    -webkit-transform: scale(1.5, 2);
    -ms-transform: scale(1.5, 2);
    transform: scale(1.5, 2);
  }

  #scale_dec {
    -webkit-transform: scale(0.7, 0.7);
    -ms-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7);
  }
</style>

(4) `skewX()` 메서드

skewX() 메서드는 해당 요소를 주어진 각도만큼 x축 방향으로 기울인다.
주어진 각도가 양수이면 x축의 양의 방향으로, 음수이면 x축의 음의 방향으로 기울인다.

<style>
  #skew_x {
    -webkit-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    transform: skewX(20deg);
  }
</style>

(5) `skewX()` 메서드

skewX() 메서드는 해당 요소를 주어진 각도만큼 x축 방향으로 기울인다.
주어진 각도가 양수이면 x축의 양의 방향으로, 음수이면 x축의 음의 방향으로 기울인다.

<style>
  #skew_y {
    -webkit-transform: skewY(20deg);
    -ms-transform: skewY(20deg);
    transform: skewY(20deg);
  }
</style>

(6) `skew()` 메서드

skew() 메서드는 해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울인다.

<style>
  #skew {
    -webkit-transform: skew(20deg, 30deg);
    -ms-transform: skew(20deg, 30deg);
    transform: skew(20deg, 30deg);
  }
</style>

(7) `matrix()` 메서드

matrix() 메서드는 모든 2D transform 메서드를 한 줄에 설정할 수 있도록 해준다.

이 메서드는 2D 변형과 관련된 6개의 매개변수를 가진다.
matrix() 메서드의 매개변수 순서는 다음과 같다.

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

<style>
  #matrix {
    -webkit-transform: matrix(0.7, 0, 0, 0.7, 1, 0);
    -ms-transform: matrix(0.7, 0, 0, 0.7, 0, 0);
    transform: matrix(2, 0.3, 0.2, 1.3, 150, 100);
  }
</style>

4) CSS3 2D `transform` 속성

속성	설명
`transform`	요소에 2D 또는 3D 변형을 적용함.
`transform-origin`	요소에 변형을 적용하는 변환 중심을 설정함.

5) CSS3 2D `transform` 메서드

메서드	설명
`matrix(n, n, n, n, n, n)`	`6`개의 매개변수로 모든 2D 변형 메소드를 한 번에 설정함.
`translate(x, y)`	현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킴.
`translateX(n)`	현재 위치에서 해당 요소를 주어진 x축의 거리만큼 이동시킴.
`translateY(n)`	현재 위치에서 해당 요소를 주어진 y축의 거리만큼 이동시킴.
`rotate(각도)`	해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킴.
`scale(x, y)`	해당 요소의 크기를 주어진 배율만큼 늘리거나 줄임.
`scaleX(n)`	해당 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄임.
`scaleY(n)`	해당 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄임.
`skew(x축각도, y축각도)`	해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울임.
`skewX(각도)`	해당 요소를 주어진 각도만큼 x축 방향으로 기울임.
`skewY(각도)`	해당 요소를 주어진 각도만큼 y축 방향으로 기울임.

3. 3D Transform

1) 3D 변형

3D 변형을 위해 제공되는 메서드는 다음과 같다.

1] rotate()

2] translate()

3] scale()

4] matrix()

5] perspective()

(1) `rotateX()` 메서드

rotateX() 메서드는 해당 요소를 주어진 각도만큼 x축을 기준으로 회전시킨다.
주어진 각도가 양수이면 x축 양의 방향으로, 음수이면 x축 음의 방향으로 회전시킨다.

<style>
  #rotate_01 {
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);
  }
</style>

(2) `rotateY()` 메서드

rotateY() 메서드는 해당 요소를 주어진 각도만큼 y축을 기준으로 회전시킨다.
주어진 각도가 양수이면 y축 양의 방향으로, 음수이면 y축 음의 방향으로 회전시킨다.

<style>
  #rotate_01 {
    -webkit-transform: rotateY(20deg);
    transform: rotateY(20deg);
  }
</style>

(3) `rotateZ()` 메서드

rotateZ() 메서드는 해당 요소를 주어진 각도만큼 z축을 기준으로 회전시킨다.
주어진 각도가 양수이면 z축 양의 방향으로, 음수이면 z축 음의 방향으로 회전시킨다.

<style>
  #rotate_01 {
    -webkit-transform: rotateZ(20deg);
    transform: rotateZ(20deg);
  }
</style>

(4) `translate3d()` 메서드

translate3d() 메서드는 현재 위치에서 해당 요소를 주어진 x축과 y축, z축의 거리만큼 이동시킨다.
주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킨다.

<style>
  #trans_01 {
    -webkit-transform: translate(100px, 50px);
    -ms-transform: translate(100px, 50px);
    transform: translate(100px, 50px);
  }

  #trans_02 {
    -webkit-transform: translate3d(100px, 50px, -150px);
    transform: translate3d(100px, 50px, -150px);
  }
</style>

rotate3d(), translate3d(), scale3d() 메서드와 같이 입체적으로 보여지는 3D 변형에 관련된 메서드는 원근감을 표현할 기준을 명시해야 한다.
위의 예제에서는 perspective() 메서드를 사용하여 원근감을 표현하기 위해 사용할 픽셀 수를 500px로 설정하고 있다.

2) CSS3 3D `transform` 속성

속성	설명
`transform`	요소에 2D 또는 3D 변형을 적용함.
`transform-origin`	요소에 변형을 적용하는 변환 중심을 설정함.
`transform-style`	요소에 변형을 적용할 때 그 변환이 자식 요소들에게도 적용될지 안 될지를 설정함.
`perspective`	3D 요소에 원근감을 표현할 때 사용할 픽셀 수를 설정함.
`perspective-origin`	3D 요소에 원근감을 표현할 때 사용할 기준 축을 설정함.
`backface-visibility`	요소의 앞면만을 표현하고, 뒷면을 표현할지 안 할지를 설정함.

3) CSS3 3D `transform` 메서드

메서드	설명
`matrix3d(n×16)`	`4x4` 행렬을 이용한 `16`개의 매개변수로 모든 3D 변형 메소드를 한 번에 설정함.
`rotate3d(x, y, z, angle)`	해당 요소를 주어진 각도만큼 x축, y축과 z축을 기준으로 회전시킴.
`rotateX(angle)`	해당 요소를 주어진 각도만큼 x축을 기준으로 회전시킴.
`rotateY(angle)`	해당 요소를 주어진 각도만큼 y축을 기준으로 회전시킴.
`rotateZ(angle)`	해당 요소를 주어진 각도만큼 z축을 기준으로 회전시킴.
`translate3d(x, y, z)`	현재의 위치에서 해당 요소를 주어진 x축, y축과 z축의 거리만큼 이동시킴.
`translateX(x)`	현재의 위치에서 해당 요소를 주어진 x축의 거리만큼 이동시킴.
`translateY(y)`	현재의 위치에서 해당 요소를 주어진 y축의 거리만큼 이동시킴.
`translateZ(z)`	현재의 위치에서 해당 요소를 주어진 z축의 거리만큼 이동시킴.
`scale3d(x, y, z)`	해당 요소의 크기를 주어진 배율만큼 x축, y축과 z축 방향으로 늘리거나 줄임.
`scaleX(x)`	해당 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄임.
`scaleY(y)`	해당 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄임.
`scaleZ(z)`	해당 요소의 z축 크기를 주어진 배율만큼 늘리거나 줄임.
`perspective(n)`	3D 요소에 원근감을 표현할 때 사용할 픽셀 수를 설정함.

4. 전환

전환을 위해 제공되는 속성는 다음과 같다.

1] transition

2] transition-delay

3] transition-duration

4] transition-property

5] transition-timing-function

1) `transition` 속성

transition 속성은 다음과 같은 순서로 정의할 수 있다.

1] 해당 요소에 추가할 CSS 스타일 전환 효과를 설정한다.

2] 추가할 전환 효과가 지속될 시간을 설정한다.

다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비가 1초 동안 3배로 늘어나는 예제이다.

<style>
  div.keyboard {
    width: 100px;
    -webkit-transition: width 1s;
    transition: width 1s;
  }

  div.keyboard:hover {
    width: 300px;
  }
</style>

또한, 해당 요소의 여러 속성을 동시에 변경할 수도 있다.

다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비뿐만 아니라 높이까지도 변경하는 예제이다.

<style>
  #resize {
    height: 100px;
    width: 150px;
    -webkit-transition: width 1s, height 3s;
    transition: width 1s, height 3s;
  }

  #resize:hover {
    width: 300px;
    height: 500px;
  }
</style>

Note

지속 시간의 기본값은 0초이므로, 효과가 지속될 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것이다.

2) `transition-timing-function` 속성

transition-timing-function 속성은 전환 효과의 시간당 속도를 설정한다.

transition-timing-function 속성의 속성값으로는 다음과 같은 값을 설정할 수 있다.

1] linear: 전환 효과가 처음부터 끝까지 일정한 속도로 진행된다.

2] ease: 기본값으로, 전환 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려진다.

3] ease-in: 전환 효과가 천천히 시작된다.

4] ease-out: 전환 효과가 천천히 끝난다.

5] ease-in-out: 전환 효과가 천천히 시작되어, 천천히 끝난다.

6] cubic-bezier(n, n, n, n): 전환 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다.

<style>
  div {
    width: 100px;
    -webkit-transition: width 1s;
    transition: width 1s;
  }

  #div_01 {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
  }

  #div_05 {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
  }

  div:hover {
    width: 300px;
  }
</style>

3) `transition-delay` 속성

transition-delay 속성은 전환 효과가 나타나기 전까지의 지연 시간을 설정한다.
전환 효과는 이 메서드로 설정된 시간이 흐른 뒤에야 비로소 시작된다.

<style>
  #resize {
    height: 100px;
    width: 150px;
    -webkit-transition: width 1s, height 2s;
    transition: width 1s, height 2s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
  }

  #resize:hover {
    width: 300px;
    height: 300px;
  }
</style>

4) 전환 효과와 변형 효과의 동시 적용

전환 효과와 변형 효과를 같이 적용할 수도 있다.

<style>
  #windmill {
    height: 100px;
    width: 100px;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;
  }

  #windmill:hover {
    width: 300px;
    height: 300px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
</style>

5) CSS3 `transition` 속성

속성	설명
`transition`	모든 `transition` 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
`transition-property`	요소에 추가할 전환 효과를 설정함.
`transition-duration`	전환 효과가 지속될 시간을 설정함.
`transition-timing-function`	전환 효과의 시간당 속도를 설정함.
`transition-delay`	전환 효과가 나타나기 전까지의 지연 시간을 설정함.

5. 애니메이션

1) `@keyframes` 규칙

CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임을 정의해야 한다.
키 프레임에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시한다.

@keyframes 규칙 안에 이렇게 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화할 것이다.

애니메이션 효과가 동작하기 위해서는 먼저 animation-name 속성을 이용하여 요소와 키 프레임을 연결해 주어야 한다.

<style>
  p {
    -webkit-animation-name: movingPara;
    -webkit-animation-duration: 3s;
    animation-name: movingPara;
    animation-duration: 3s;
  }

  @keyframes movingPara {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: 0%;
    }
  }
</style>

위의 예제에서 from 키워드에는 처음 스타일을 명시하고, to 키워드에는 마지막 스타일을 명시한다.

하지만 좀 더 복잡한 애니메이션 효과를 나타내기 위해서는 from 키워드나 to 키워드 대신에 %(퍼센트)를 사용할 수 있다.
0%에는 처음 스타일을, 100%에는 마지막 스타일을 명시하고, 중간에 원하는 수만큼의 키 프레임을 생성할 수 있다.

<style>
  p {
    -webkit-animation-name: movingPara;
    -webkit-animation-duration: 4s;
    animation-name: movingPara;
    animation-duration: 4s;
  }

  @-webkit-keyframes movingPara {
    0% {
      border-color: red;
    }
    20% {
      border-color: orange;
    }
    40% {
      border-color: yellow;
    }
    50% {
      border-color: green;
    }
    60% {
      border-color: blue;
    }
    80% {
      border-color: navy;
    }
    100% {
      border-color: purple;
    }
  }
</style>

재생이 모두 끝난 애니메이션 효과는 해당 요소가 맨 처음 가지고 있던 스타일로 요소를 되돌려 놓는다.

2) `animation-duration` 속성

animation-duration 속성은 애니메이션 효과를 재생할 시간을 설정한다.
재생 시간의 기본값은 0초이므로, 재생할 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것이다.

3) `animation-delay` 속성

animation-delay 속성은 애니메이션 효과가 나타나기까지의 지연 시간을 설정한다.
애니메이션 효과는 이 속성값으로 설정된 시간이 흐른 뒤에야 비로소 시작된다.

<style>
  p {
    -webkit-animation-name: movingPara;
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 2s;
    animation-name: movingPara;
    animation-duration: 4s;
    animation-delay: 2s;
  }
</style>

4) `animation-iteration-count` 속성

animation-iteration-count 속성은 애니메이션 효과의 반복 횟수를 설정한다.
이 속성값으로 infinite를 설정하면, 애니메이션 효과가 무한히 반복될 것이다.

<style>
  #one,
  #loop {
    -webkit-animation-name: movingPara;
    -webkit-animation-duration: 4s;
    animation-name: movingPara;
    animation-duration: 4s;
  }

  #one {
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
  }

  #loop {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
</style>

5) `animation-direction` 속성

animation-direction 속성은 애니메이션의 진행 방향을 설정한다.
진행 방향을 나타내는 속성값으로 reverse와 alternate를 설정할 수 있다.

reverse 속성값은 애니메이션 효과의 진행 방향을 원래 방향이 아닌 반대 방향으로 변경한다.
즉, 애니메이션 효과가 from에서 to 방향이 아닌, to에서 from 방향으로 진행된다.

<style>
  div {
    -webkit-animation-name: movingPara;
    -webkit-animation-duration: 2s;
    animation-name: movingPara;
    animation-duration: 2s;
  }

  #backward {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
  }
</style>

alternate 속성값은 애니메이션 효과의 진행 방향을 애니메이션이 반복될 때마다 계속 변경한다.
즉, 애니메이션 효과가 from에서 to 방향으로 한 번 진행되고 나면, 다음번에는 to에서 from 방향으로 진행되게 변경시킨다.
이런 식으로 번갈아 가면서 전체 반복 횟수만큼 애니메이션을 반복하게 된다.

<style>
  div {
    -webkit-animation-name: movingPara;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 4;
    animation-name: movingPara;
    animation-duration: 2s;
    animation-iteration-count: 4;
  }

  #backward {
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }
</style>

6) `animation-timing-function` 속성

animation-timing-function 속성은 애니메이션 효과의 시간당 속도를 설정한다.

animation-timing-function 속성의 속성값으로는 다음과 같은 값을 설정할 수 있다.

1] linear: 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행된다.

2] ease: 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려진다.

3] ease-in: 애니메이션 효과가 천천히 시작된다.

4] ease-out: 애니메이션 효과가 천천히 끝난다.

5] ease-in-out: 애니메이션 효과가 천천히 시작되어, 천천히 끝난다.

6] cubic-bezier(n, n, n, n): 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행된다.

<style>
  div {
    -webkit-animation: timingFunc 4s 3;
    animation: timingFunc 4s 3;
  }

  #div_01 {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  #div_05 {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  @keyframes timingFunc {
    from {
      left: 0px;
    }
    to {
      left: 300px;
    }
  }
</style>

7) 애니메이션 축약 표현

모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
  div {
    animation-name: myShorthand;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 3;
    animation-direction: alternate;
  }
</style>

위의 예제와 똑같은 애니메이션 효과를 다음과 같이 표현할 수 있다.

div {
  animation: myShorthand 3s ease-in-out 1s 3 alternate;
}

<style>
  #long {
    -webkit-animation-name: myShorthand;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-direction: reverse;
    animation-name: myShorthand;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 3;
    animation-direction: reverse;
  }

  #short {
    -webkit-animation: myShorthand 3s ease-in-out 1s 3 reverse;
    animation: myShorthand 3s ease-in-out 1s 3 reverse;
  }
</style>

8) CSS3 `animation` 속성

속성	설명
`animation`	모든 `animation` 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
`animation-name`	애니메이션 효과의 이름을 설정함.
`animation-duration`	애니메이션 효과를 재생할 시간을 설정함.
`animation-delay`	애니메이션 효과가 나타나기까지의 지연 시간을 설정함.
`animation-iteration-count`	애니메이션 효과가 몇 번 반복될지를 설정함.
`animation-direction`	애니메이션의 진행 방향을 설정함.
`animation-timing-function`	애니메이션 효과의 시간당 속도를 설정함.
`animation-fill-mode`	애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정함.
`animation-play-state`	애니메이션 효과의 재생 상태를 설정함.

8. CSS3 변형

1. 키워드

2. 2D Transform

1) 변형

2) CSS 좌표 체계

3) 2D 변형

(1) translate() 메서드

(2) rotate() 메서드

(3) scale() 메서드

(4) skewX() 메서드

(5) skewX() 메서드

(6) skew() 메서드

(7) matrix() 메서드

4) CSS3 2D transform 속성

5) CSS3 2D transform 메서드

3. 3D Transform

1) 3D 변형

(1) rotateX() 메서드

(2) rotateY() 메서드

(3) rotateZ() 메서드

(4) translate3d() 메서드

2) CSS3 3D transform 속성

3) CSS3 3D transform 메서드