집 >웹 프론트엔드 >CSS 튜토리얼 >CSS Transform Perspective를 사용하여 사다리꼴 모양을 어떻게 만들 수 있나요?

CSS Transform Perspective를 사용하여 사다리꼴 모양을 어떻게 만들 수 있나요?

How can I create a Trapezoid shape using CSS Transform Perspective?

CSS3으로 사다리꼴 그리기

CSS3으로 사다리꼴을 만들려면 몇 가지 기발한 기술이 필요합니다. CSS3 3D 변환 사용 제안에도 불구하고 우리는 CSS Transform Perspective를 활용하는 현대적인 방법을 탐색합니다.

CSS Transform Perspective

CSS Transform Perspective 속성은 3D 공간을 도입합니다. 요소를 사용하여 지정된 관점을 중심으로 회전할 수 있습니다. 요소에 원근 값을 적용한 다음 이를 축(X, Y 또는 Z) 중 하나를 따라 회전하면 사다리꼴의 환영을 만들 수 있습니다.

예

다음 CSS를 고려해보세요 code:

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

HTML:

<div class="trapezoid"></div>

이 예에서 클래스가 .trapezoid인 요소는 너비와 높이가 200픽셀, 빨간색 배경, 10픽셀의 원근과 X축을 따라 1도 회전을 적용하는 변환입니다.

결과 요소는 상단과 하단이 약간 기울어진 사다리꼴입니다. 원근감 값이 커질수록 효과는 더욱 뚜렷해집니다.

위 내용은 CSS Transform Perspective를 사용하여 사다리꼴 모양을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：