HTML, CSS 기울이기 - skew

skew() 함수의 구문은 다음과 같습니다.

skew(x-deg, y-deg);

여기서 x-deg는 요소를 x축으로 기울일 각도이고, y-deg는 요소를 y축으로 기울일 각도입니다. 각도는 degrees 단위로 지정됩니다. 음수 각도는 반대 방향으로 기울이는 것을 의미합니다.

예를 들어, 다음 CSS는 요소를 x축으로 30도, y축으로 45도로 기울입니다.

div {
  transform: skew(30deg, 45deg);
}

이 CSS는 다음과 같은 결과를 생성합니다.

<div style="transform: skew(30deg, 45deg)">
  <p>이 요소는 x축으로 30도, y축으로 45도로 기울였습니다.</p>
</div>

skew() 함수는 다음과 같은 2개의 옵션을 사용할 수 있습니다.

• origin: 요소의 기울임 중심을 지정합니다.
• deg: 각도를 degrees 단위로 지정합니다. (기본값)
• rad: 각도를 radians 단위로 지정합니다.

예를 들어, 다음 CSS는 요소의 기울임 중심을 요소의 왼쪽 상단 모서리로 설정하고, 각도를 radians 단위로 지정합니다.

div {
  transform: skew(30deg, 45deg, 0, 0);
}

이 CSS는 다음과 같은 결과를 생성합니다.

<div style="transform: skew(30deg, 45deg, 0, 0)"> <p>이 요소는 x축으로 30도, y축으로 45도로 기울였으며, 기울임 중심은 왼쪽 상단 모서리입니다.</p> </div>

skew() 함수는 CSS transform 속성에 사용됩니다.

div {
  transform: skew(30deg, 45deg);
}

이 CSS는 요소를 x축으로 30도, y축으로 45도로 기울입니다.

skew() 함수는 HTML/CSS에서 요소를 기울이는 데 사용할 수 있는 유용한 함수입니다. 이 함수를 사용하여 요소를 다양한 각도로 기울일 수 있습니다.

다음은 skew() 함수를 사용하여 다양한 효과를 만드는 예입니다.

• 텍스트를 기울여서 강조합니다.
• 이미지를 기울여서 3D 효과를 만듭니다.
• 요소를 기울여서 독특한 모양을 만듭니다.

skew() 함수는 창의적인 웹 디자인에 유용한 도구입니다.

skew() 함수의 사용 예

다음은 skew() 함수를 사용하여 다양한 효과를 만드는 예입니다.

텍스트를 기울여서 강조하기

다음 CSS는 텍스트를 30도 기울여서 강조합니다.

p {
  transform: skew(30deg);
}

이미지를 기울여서 3D 효과 만들기

다음 CSS는 이미지를 60도 기울여서 3D 효과를 만듭니다.

img {
  transform: skew(60deg);
}

요소를 기울여서 독특한 모양 만들기

다음 CSS는 요소를 45도 기울여서 독특한 모양을 만듭니다.

div {
  transform: skew(45deg);
}

 

#bolt {

    width: 400px;

    margin: 100px;

    transform: skew(20deg, 20deg);

}

skew() - CSS: Cascading Style Sheets | MDN