"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > CSS 변환으로 기울이기를 달성하는 방법: 양쪽을 기울이기

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

2024-11-06에 게시됨
검색:602

How to Achieve Skew with CSS Transform: Skewing Both Sides

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

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

원근감 기울이기 적용:

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

transform: perspective(distance) rotateY(angle);

"거리"를 원근 거리를 설정하는 값으로 바꿉니다(값이 높을수록 더 먼 원근이 생성됨). "angle"을 원하는 회전 각도(이 경우 45도)로 바꾸세요.

CSS 예:

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

HTML 코드:

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

외부 리소스의 예:

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

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3