CSS 변환 - 이동, 회전, 크기 조정 및 기울이기

강의 12: CSS 변환 – 이동, 회전, 크기 조정 및 기울이기

"기초부터 광채까지" 강좌의 열두 번째 강의에 오신 것을 환영합니다. 오늘은 요소의 위치, 크기, 방향을 조작할 수 있는 강력한 기능인 CSS 변환을 살펴보겠습니다. Translate(), Rotate(), Scale(), Skew()와 같은 변환 함수의 기본 사항을 다룹니다.

---

1. 변환 속성 개요

변환 속성을 사용하면 요소에 이동, 회전, 크기 조절, 기울이기 등 다양한 변형을 적용할 수 있습니다. 이러한 변환은 요소의 원래 위치를 기준으로 적용됩니다.

• 구문:

  transform: transform-function(value);

---

2. 번역

translate() 함수는 X축과 Y축을 따라 원래 위치에서 요소를 이동합니다. 픽셀(px), 백분율(%) 또는 기타 단위로 값을 지정할 수 있습니다.

• 예: 요소를 오른쪽으로 50px, 아래로 30px 이동합니다.

  .box {
    transform: translate(50px, 30px);
  }

이 예에서 .box 요소는 원래 위치에서 오른쪽으로 50px, 아래로 30px 이동합니다.

---

3. 회전

rotate() 함수는 기본적으로 요소의 중심인 고정점을 중심으로 요소를 회전합니다. 회전 각도는 도(deg) 단위로 지정됩니다.

• 예: 요소를 45도 회전합니다.

  .box {
    transform: rotate(45deg);
  }

이 경우 .box 요소는 중심을 기준으로 시계 방향으로 45도 회전됩니다.

---

4. 규모

scale() 함수는 요소의 크기를 조정합니다. X축과 Y축에 대한 배율 인수를 지정할 수 있습니다. 값 1은 요소의 원래 크기를 의미하고, 1보다 크거나 작은 값은 각각 크기를 늘리거나 줄입니다.

• 예: 요소를 원래 크기의 1.5배로 확대합니다.

  .box {
    transform: scale(1.5);
  }

이 예에서는 .box 요소가 원래 크기의 최대 150%까지 확대됩니다.

---

5. 스큐

skew() 함수는 X축과 Y축을 따라 요소를 기울입니다. 각도는 도(deg) 단위로 지정됩니다.

• 예: 요소를 X축을 따라 20도, Y축을 따라 10도 기울입니다.

  .box {
    transform: skew(20deg, 10deg);
  }

이 경우 .box 요소는 가로로 20도, 세로로 10도 기울어집니다.

---

6. 변환 함수 결합

단일 변환 속성에 여러 변환 기능을 결합할 수 있습니다. 기능은 나타나는 순서대로 적용됩니다.

• 예: 이동, 회전 및 크기 조정을 결합합니다.

  .box {
    transform: translate(50px, 30px) rotate(45deg) scale(1.5);
  }

이 예에서는:

• .box는 먼저 번역된 다음 회전되고 마지막으로 크기가 조정됩니다. 각 변환은 순차적으로 적용됩니다.

---

7. 원점 변환

transform-origin 속성은 변환이 발생하는 지점을 지정합니다. 기본적으로 요소의 중심이지만 임의의 지점으로 변경할 수 있습니다.

• 예: 변환 원점을 왼쪽 상단으로 변경합니다.

  .box {
    transform-origin: top left;
    transform: rotate(45deg);
  }

이 경우 .box는 중앙이 아닌 왼쪽 상단을 기준으로 45도 회전합니다.

---

8. 3D 변형

CSS는 3D 변환도 지원합니다. spective(),rotateX(),rotateY(),translateZ()와 같은 함수를 사용하여 3D 효과를 만들 수 있습니다.

• 예: 원근감을 추가하여 3D 효과를 만듭니다.

  .container {
    perspective: 1000px;
  }

  .box {
    transform: rotateY(45deg);
  }

이 예에서는:

• .container 요소는 원근감을 제공하여 .box가 3D 공간에서 회전하는 것처럼 보이게 합니다.

---

연습

1. CSS 변환을 사용하여 카드 뒤집기 애니메이션을 만듭니다. 뒷면이 보이도록 마우스를 올리면 카드가 180도 회전해야 합니다.
2. 변환, 회전, 크기 조절을 결합하여 요소에 독특한 효과를 만들어 보세요.

---

다음: 다음 강의에서는 CSS 애니메이션에 대해 알아보고 웹 요소에 동적인 애니메이션 효과를 만드는 방법을 배우겠습니다. 모션으로 디자인에 생기를 불어넣을 준비를 하세요!

---

LinkedIn에서 나를 팔로우하세요.

리도이 하산

위 내용은 CSS 변환 - 이동, 회전, 크기 조정 및 기울이기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!