CSS 변형 함수

 

 

CSS 변형 함수 상세 설명 및 예제

개요

CSS 변형 함수는 HTML 요소의 크기, 모양, 위치를 변형시키는 데 사용됩니다. 2D 및 3D 변형을 모두 지원하며, 다양한 효과를 만들어낼 수 있습니다.

각 함수 설명 및 예제

1. translate()  : 트랜즐레이트

• 설명: 요소를 특정 거리만큼 이동시킵니다.
• 구문: translate(x, y)
  • x: 수평 이동 거리 (px, em 등)
  • y: 수직 이동 거리 (px, em 등)
• 예제:
  CSS

  div {
    transform: translate(50px, 100px);
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   
  • 위 예제는 div 요소를 오른쪽으로 50px, 아래쪽으로 100px 이동시킵니다.

2. scaleX(), scaleY(), scale() : 스케일

• 설명: 요소를 X축 또는 Y축 방향으로 확대 또는 축소합니다. scale()은 X축과 Y축을 동시에 조절합니다.
• 구문:
  • scaleX(value): X축 방향으로 확대/축소
  • scaleY(value): Y축 방향으로 확대/축소
  • scale(x, y): X축과 Y축을 동시에 확대/축소 (y 값 생략 시 x 값으로 양축 모두 조절)
• 예제:
  CSS

  div {
    transform: scaleX(2); /* X축 방향으로 2배 확대 */
    transform: scaleY(0.5); /* Y축 방향으로 절반으로 축소 */
    transform: scale(1.5); /* X축과 Y축 모두 1.5배 확대 */
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   

3. rotate()

• 설명: 요소를 특정 각도만큼 회전시킵니다.
• 구문: rotate(angle)
  • angle: 회전 각도 (deg, rad, turn)
• 예제:
  CSS

  div {
    transform: rotate(45deg); /* 45도 회전 */
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   

4. skewX(), skewY(), skew()

• 설명: 요소를 X축 또는 Y축 방향으로 비틀어줍니다. skew()는 X축과 Y축을 동시에 비틀어줍니다.
• 구문:
  • skewX(angle): X축 방향으로 비틀기
  • skewY(angle): Y축 방향으로 비틀기
  • skew(x-angle, y-angle): X축과 Y축을 동시에 비틀기
• 예제:
  CSS

  div {
    transform: skewX(30deg); /* X축 방향으로 30도 비틀기 */
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   

5. matrix()

• 설명: 위의 모든 변형을 하나의 함수로 표현하는 가장 강력한 함수입니다.
• 구문: matrix(a, b, c, d, tx, ty)
  • 각 값은 변형 행렬의 요소를 나타내며, 복잡한 변형을 구현할 수 있습니다.
• 예제:
  CSS

  div {
    transform: matrix(1, 0.5, -0.5, 1, 50, 100); /* 복합적인 변형 */
  }
  

  코드를 사용할 때는 주의가 필요합니다.

   

여러 변형 결합하기

위의 함수들을 조합하여 더 복잡한 변형을 만들 수 있습니다.

CSS

div {
  transform: translate(50px, 100px) rotate(45deg) scale(0.5);
}

코드를 사용할 때는 주의가 필요합니다.

 

추가 설명

• 변환 순서: 변형 함수는 순서에 따라 적용됩니다. 위의 예제에서는 먼저 translate, 그 다음 rotate, 마지막으로 scale이 적용됩니다.
• 3D 변형: transform-style 속성을 preserve-3d로 설정하면 3D 변형을 사용할 수 있습니다.
• 브라우저 호환성: 대부분의 최신 브라우저에서 CSS 변형을 지원하지만, 오래된 브라우저에서는 vendor prefix (예: -webkit-, -moz-)를 사용해야 할 수 있습니다.

예제 활용

• 애니메이션: transition과 함께 사용하여 부드러운 애니메이션 효과를 만들 수 있습니다.
• 레이아웃: 요소의 위치와 크기를 동적으로 조절하여 다양한 레이아웃을 구현할 수 있습니다.
• UI 디자인: 버튼, 카드 등 UI 요소에 다양한 효과를 적용하여 사용자 경험을 향상시킬 수 있습니다.

주의: matrix() 함수는 다른 함수에 비해 사용이 복잡하므로, 간단한 변형에는 다른 함수를 사용하는 것이 좋습니다.