CSS 변환을 사용하여 불규칙한 사각형 모양을 만드는 방법은 무엇입니까?

CSS에서 불규칙한 사각형 모양 만들기

이미지에 묘사된 불규칙한 사각형 모양을 만들기 위해 회전과 회전을 조합하여 사용할 수 있습니다. CSS의 관점 변환. 이 기술을 사용하면 복잡한 3D 모델링 소프트웨어를 사용하지 않고도 3D와 유사한 효과를 만들 수 있습니다.

CSS 코드:

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

HTML 마크업:

<code class="html"><div class="box">
</div></code>

설명:

• 원근감: 이 속성은 요소에 원근감을 적용하여 깊이의 환상을 만듭니다. 값은 180px로 설정됩니다.
• 회전 변환: x축(15deg), y축(20deg), z축(-3deg)을 따라 세 가지 회전 변환을 적용합니다. ). 이러한 회전을 통해 정사각형이 전체적으로 왜곡되어 불규칙한 모양이 됩니다.

이러한 변환을 결합하면 이미지에 표시된 것처럼 원하는 불규칙한 사각형 모양을 만들 수 있습니다.

위 내용은 CSS 변환을 사용하여 불규칙한 사각형 모양을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!