CSS 트랜스폼, 트랜지션, 애니메이션 정리

1. CSS 트랜스폼(Transform)

CSS transform 속성은 HTML 요소에 2D 및 3D 변형을 적용할 수 있게 해줍니다. 변형에는 이동, 회전, 크기 조정 등이 포함됩니다.

1.1 translate(): 요소를 이동

• 용도: 지정한 방향으로 요소를 이동시킵니다.

• 값: translate(x, y)로 x축, y축으로 각각 이동할 거리를 지정합니다.

  transform: translate(50px, 100px); /* x축으로 50px, y축으로 100px 이동 */

1.2 scale(): 요소의 크기 조정

• 용도: 요소를 확대하거나 축소시킵니다.

• 값: scale(x, y)로 x축과 y축 방향으로 각각 크기를 조정합니다. (값이 1보다 크면 확대, 작으면 축소).

  transform: scale(1.5, 2); /* x축으로 1.5배, y축으로 2배 확대 */

1.3 rotate(): 요소를 회전

• 용도: 지정한 각도만큼 요소를 회전시킵니다.

• 값: rotate(angle)로 회전 각도를 지정하며, 양수는 시계 방향, 음수는 반시계 방향으로 회전합니다.

  transform: rotate(45deg); /* 요소를 45도 회전 */

1.4 3D 회전과 원근감 설정

• rotateX(), rotateY(): 요소를 3D 회전시킬 수 있습니다. X축 또는 Y축을 기준으로 회전할 수 있습니다.

• 3D 회전을 사용할 때는 원근감을 설정하는 것이 중요하며, perspective 속성을 사용해 부모 요소에 원근감을 적용합니다.

  .parent {
    perspective: 1000px; /* 원근감 설정 */
  }
  
  .child {
    transform: rotateX(45deg); /* X축 기준으로 45도 회전 */
  }

---

2. CSS 트랜지션(Transition)

CSS transition 속성은 요소의 스타일을 일정한 시간 동안 부드럽게 변화시키는 기능입니다. 예를 들어, 요소가 크기, 색상 등을 변경할 때 즉시 변하지 않고 시간에 따라 점진적으로 변할 수 있습니다.

2.1 transition 속성

• 용도: 특정 CSS 속성이 변할 때 지정된 시간 동안 천천히 변하도록 설정합니다.

주요 속성들:

• transition-property: 트랜지션을 적용할 속성을 지정합니다. 예: background-color, transform.
• transition-duration: 변화가 완료될 때까지 걸리는 시간을 지정합니다. 예: 1s (1초).
• transition-timing-function: 트랜지션이 어떻게 진행될지를 지정합니다. 예: ease, linear, ease-in, ease-out.
• transition-delay: 트랜지션이 시작되기 전의 지연 시간을 설정합니다. 예: 0.5s.

2.2 예시

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease, transform 1s;
}

.box:hover {
  background-color: red;
  transform: scale(1.5);
}

• 설명: 마우스를 요소 위에 올리면 배경색이 0.5초에 걸쳐 파란색에서 빨간색으로 변하고, 1초 동안 크기가 1.5배로 확대됩니다.

---

3. CSS 애니메이션(Animation)

CSS 애니메이션은 @keyframes 규칙을 사용하여 요소의 스타일을 여러 단계에 걸쳐 변화시키는 것을 정의합니다. 애니메이션을 통해 복잡한 움직임을 만들 수 있습니다.

3.1 @keyframes: 애니메이션 정의

@keyframes는 애니메이션의 중간 단계를 정의하는 데 사용됩니다. 애니메이션의 각 단계에서 요소가 어떻게 변화할지를 설정합니다.

3.2 애니메이션 관련 속성

• animation-name: 적용할 애니메이션의 이름을 지정합니다.
• animation-duration: 애니메이션이 진행될 시간을 지정합니다.
• animation-timing-function: 애니메이션의 속도를 제어합니다 (예: ease, linear, ease-in-out).
• animation-delay: 애니메이션 시작 전 지연 시간을 설정합니다.
• animation-iteration-count: 애니메이션을 몇 번 반복할지 설정 (infinite로 무한 반복 가능).
• animation-direction: 애니메이션의 재생 방향을 설정 (normal, reverse, alternate 등).

3.3 애니메이션 예시

@keyframes moveBox {
  0% {
    transform: translateX(0);
    background-color: blue;
  }
  50% {
    transform: translateX(100px);
    background-color: green;
  }
  100% {
    transform: translateX(200px);
    background-color: red;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: moveBox 3s ease-in-out infinite;
}

• 설명: 이 애니메이션은 moveBox라는 이름을 가지며, 3초 동안 x축으로 이동하면서 색상이 파란색 → 초록색 → 빨간색으로 변화합니다. 애니메이션은 무한 반복됩니다.

---

요약

1. 트랜스폼(Transform):

   • translate(): 요소를 이동.
   • scale(): 요소의 크기를 확대/축소.
   • rotate(): 요소를 회전.
   • 3D 변형: rotateX(), rotateY()로 3D 회전, 원근감을 위해 perspective 추가.

2. 트랜지션(Transition):

   • 부드러운 변화를 설정해 CSS 속성이 일정 시간 동안 점진적으로 변하도록 함.
   • 주요 속성: transition-property, transition-duration, transition-timing-function, transition-delay.

3. 애니메이션(Animation):

   • @keyframes 규칙으로 애니메이션의 각 단계를 정의.
   • 주요 속성: animation-name, animation-duration, animation-timing-function, animation-iteration-count.

이 속성들을 활용하여 부드러운 변화, 움직임, 회전, 확대/축소 효과를 웹 페이지에 적용할 수 있습니다.