CSS 변환으로 기울이기를 달성하는 방법: 양쪽을 기울이기

CSS 변환으로 기울이기 달성: 양쪽 기울이기

제공된 이미지는 요소의 양쪽 모서리를 기울이는 흥미로운 기울이기 효과를 보여줍니다. CSS 변환을 사용하여 이 효과를 다시 만들려면 다음 단계를 따르세요.

원근감 기울이기 적용:

원근감을 추가하려면 다음 CSS 속성을 사용하세요.

transform: perspective(distance) rotateY(angle);

'거리'를 값으로 대체하여 원근 거리를 설정합니다(값이 높을수록 원근이 더 멀어집니다). "angle"을 원하는 회전 각도(이 경우 45도)로 바꿉니다.

예제 CSS:

.red-box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

HTML 코드:

요소에 기울이기를 적용하려면 다음 클래스를 추가하세요.

<div class="red-box"></div>

외부 리소스의 예:

제공된 CSS 및 HTML 코드는 http://desandro.github.com/3dtransforms/docs/perspective.html에서 파생됩니다. 이 웹사이트는 원근 변환 사용에 대한 추가 예제와 문서를 제공합니다.

위 내용은 CSS 변환으로 기울이기를 달성하는 방법: 양쪽을 기울이기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!