CSS 2D Transforms

CSS 2D Transforms: 2D 변형을 통한 웹 요소 조작

CSS 2D Transforms는 HTML 요소를 회전, 크기 조절, 이동, 기울임 등의 변형을 통해 2D 평면에서 조작할 수 있게 해줍니다. 2D 변형은 웹 디자인에 애니메이션과 인터랙션 효과를 추가할 수 있는 강력한 도구입니다. 이 자료에서는 transform 속성으로 사용할 수 있는 다양한 2D 변형 기능과 실전 예제를 다루겠습니다.

1. `transform` 속성의 기본 개념

CSS에서 transform 속성은 요소에 변형을 적용하는 데 사용됩니다. 변형의 종류는 다음과 같습니다:

translate(): 요소를 이동시킵니다.
rotate(): 요소를 회전시킵니다.
scale(): 요소의 크기를 조절합니다.
skew(): 요소를 기울입니다.
matrix(): 여러 변형을 결합합니다.

2. `translate()`: 요소 이동

translate() 함수는 요소를 x축과 y축을 기준으로 지정된 거리만큼 이동시킵니다.

기본 구문

transform: translate(x, y);

x: 요소를 수평 방향으로 이동.
y: 요소를 수직 방향으로 이동.

예시: 요소를 오른쪽과 아래로 이동

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: translate(50px, 50px);
}

이 코드는 요소를 오른쪽으로 50px, 아래로 50px 이동시킵니다.

예시: 요소를 왼쪽과 위로 이동

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  transform: translate(-20px, -30px);
}

이 코드는 요소를 왼쪽으로 20px, 위로 30px 이동시킵니다.

3. `rotate()`: 요소 회전

rotate() 함수는 요소를 지정된 각도만큼 회전시킵니다. 양수는 시계 방향으로, 음수는 반시계 방향으로 회전합니다.

기본 구문

transform: rotate(angle);

angle: 회전할 각도를 지정하며, 단위는 deg(도) 입니다.

예시: 요소를 45도 회전

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  transform: rotate(45deg);
}

이 코드는 요소를 시계 방향으로 45도 회전시킵니다.

예시: 요소를 반시계 방향으로 90도 회전

.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  transform: rotate(-90deg);
}

이 코드는 요소를 반시계 방향으로 90도 회전시킵니다.

4. `scale()`: 요소 크기 조절

scale() 함수는 요소의 크기를 가로와 세로 방향으로 확대 또는 축소합니다. 기본 크기는 1이며, 1보다 큰 값은 확대, 1보다 작은 값은 축소를 의미합니다.

기본 구문

transform: scale(x, y);

x: 가로 크기를 조절하는 값.
y: 세로 크기를 조절하는 값(생략 시 x와 동일한 값 적용).

예시: 요소를 2배로 확대

.box {
  width: 100px;
  height: 100px;
  background-color: lightpink;
  transform: scale(2);
}

이 코드는 요소의 크기를 가로와 세로 모두 2배로 확대합니다.

예시: 가로 1.5배, 세로 0.5배로 조절

.box {
  width: 100px;
  height: 100px;
  background-color: lightyellow;
  transform: scale(1.5, 0.5);
}

이 코드는 가로는 1.5배로 확대하고, 세로는 0.5배로 축소합니다.

5. `skew()`: 요소 기울이기

skew() 함수는 요소를 기울이는 효과를 줍니다. x축과 y축을 기준으로 기울기 각도를 설정할 수 있습니다.

기본 구문

transform: skew(x-angle, y-angle);

x-angle: x축을 기준으로 기울일 각도.
y-angle: y축을 기준으로 기울일 각도(생략 시 0deg).

예시: x축을 기준으로 20도 기울이기

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  transform: skew(20deg, 0deg);
}

이 코드는 x축을 기준으로 20도 기울여 요소가 오른쪽으로 기울어집니다.

예시: x축과 y축 모두 기울이기

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: skew(20deg, 15deg);
}

이 코드는 x축을 20도, y축을 15도 기울입니다.

6. `matrix()`: 여러 변형 결합

matrix() 함수는 translate(), scale(), skew(), rotate()를 하나의 매트릭스로 결합하여 동시에 적용할 수 있는 고급 방법입니다.

기본 구문

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

scaleX: x축 크기.
skewY: y축의 기울기.
skewX: x축의 기울기.
scaleY: y축 크기.
translateX: x축 이동.
translateY: y축 이동.

예시: matrix 변형

.box {
  width: 100px;
  height: 100px;
  background-color: lightsalmon;
  transform: matrix(1, 0.3, 0.3, 1, 50, 50);
}

이 코드는 x축과 y축을 각각 50px 이동시키고, 0.3의 기울기를 적용하여 기울어진 상태에서 요소가 변형됩니다.

7. 여러 변형 함께 사용하기

CSS에서는 여러 변형을 동시에 적용할 수 있습니다. translate(), rotate(), scale() 등을 함께 사용할 때는 공백으로 구분해 나열합니다.

예시: 여러 변형 적용

.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}

이 코드는 요소를 오른쪽으로 50px, 아래로 50px 이동시키고, 45도 회전한 후 1.5배로 확대합니다.

8. 실전 예시: 애니메이션과 함께 사용

transform 속성을 애니메이션과 결합하면 역동적인 디자인을 만들 수 있습니다. 예를 들어, 요소가 확대되거나 회전하는 효과를 애니메이션으로 구현할 수 있습니다.

예시: 회전 애니메이션

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation: rotateAnimation 2s infinite linear;
}

이 코드는 요소가 2초 동안 360도 회전하는 애니메이션을 무한 반복합니다.

CSS 2D Transforms의 다양한 속성인 translate, rotate, scale, skew, matrix 등을 설명하며, 실전 예제를 통해 2D 변형을 효과적으로 사용하는 방법을 다룹니다. 2D 변형은 웹 디자인에 동적 효과를 추가할 수 있는 중요한 도구입니다.

코딩 스쿨 CSS