CSS로 불규칙한 사각형을 어떻게 만들 수 있나요?

CSS로 불규칙한 정사각형 모양 만들기

기존 대칭을 거부하는 정사각형을 상상하시나요? CSS는 이미지에 표시된 것과 같은 불규칙한 모양을 만드는 도구를 제공합니다.

비결은 주로 Perspective, RotateX, RotateY 및 RotateZ와 같은 변환 속성을 영리하게 사용하는 데 있습니다. 이러한 속성을 사용하면 모양의 3D 방향을 조작하여 불규칙한 각도와 깊이의 환상을 만들 수 있습니다.

제공된 예에서 CSS 코드는 다음 변환을 수행합니다.

<code class="css">.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}</code>

• 원근감: 소실점을 설정하여 깊이감을 줍니다.
• RotateX: X축(가로)을 따라 모양을 기울입니다.
• RotateY: y축(세로)을 따라 도형을 회전합니다.
• RotateZ: z축(페이지에 수직)을 따라 도형을 회전합니다.

이러한 값을 실험하면 다양한 불규칙 사각형 모양을 얻을 수 있고 디자인에 독특한 느낌을 더할 수 있습니다.

위 내용은 CSS로 불규칙한 사각형을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!