• 목록

CSS 트랜스폼 skew() 함수

skew() 함수는 요소를 2차원 평면 위에서 비틀어 기울이는 효과를 줄 때 사용합니다. 

마치 종이의 양 끝을 잡고 서로 반대 방향으로 미는 것과 같은 시각적 효과를 냅니다.

1. 기본 문법 및 단위 transform: skew(x-angle, y-angle); 형태로 작성하며, 각도를 나타내는 deg 단위를 주로 사용합니다.

• x-angle: X축(가로) 방향으로 기울일 각도입니다.

• y-angle: Y축(세로) 방향으로 기울일 각도입니다. (생략하면 0으로 처리됩니다.)

2. 세부 함수 종류 특정 축으로만 기울이고 싶을 때 사용하면 코드가 더 명확해집니다.

• skewX(n): 가로 방향으로 요소를 비틉니다. 세로선이 기울어지게 됩니다.

• skewY(n): 세로 방향으로 요소를 비틉니다. 가로선이 기울어지게 됩니다.

3. 주요 특징 및 활용 팁

• 강렬한 디자인 효과: 버튼이나 배경 박스에 비스듬한 사선 디자인을 넣고 싶을 때 매우 유용합니다.

• 텍스트 왜곡 주의: 요소 전체가 기울어지기 때문에 안에 들어있는 글자도 함께 기울어집니다. 만약 배경만 기울이고 글자는 똑바로 나오게 하고 싶다면, 내부 요소에 반대 방향으로 skew를 다시 적용하는 기법을 사용합니다.

  CSS

  .skew-box {
    transform: skewX(-20deg); /* 박스를 왼쪽으로 20도 기울임 */
  }
  .skew-box p {
    transform: skewX(20deg); /* 글자는 다시 오른쪽으로 20도 되돌림 */
  }
  

4. 실전 활용 사례

• 평행사변형 모양의 버튼: 일반적인 직사각형 버튼보다 더 역동적인 느낌을 줄 수 있습니다.

• 슬라이드 전환 애니메이션: 화면이 비스듬하게 밀려 나가는 효과를 줄 때 사용합니다.

 

• 목록