투명한 영역을 사용하여 단면 CSS3 기울이기 변환 효과를 어떻게 만들 수 있습니까?

한쪽의 CSS3 기울이기 변환

"CSS3 Transform Skew One Side" 효과를 만드는 방법을 이해하면 다양한 웹 디자인 프로젝트에 유용할 수 있습니다. 그러나 배경에 이미지를 사용할 때 단순히 기울이기 변환을 적용하면 원하는 결과를 얻을 수 없다는 점에 유의하는 것이 중요합니다.

문제 해결

특정 사항에 따라 이 경우 투명하게 기울어진 영역을 유지하면서 이미지의 한쪽 면만 기울이려면 CSS3 변환이 필요합니다. 실선 테두리를 사용하여 제공된 솔루션은 이 효과를 효과적으로 얻을 수 없습니다.

해결책: 반대 편향이 있는 중첩된 Div

원하는 효과를 얻으려면 중첩된 Div 활용을 고려하세요. div를 이미지에 적용하고 상위 div의 기울기 값과 반대되는 기울기 값을 적용합니다. 예를 들어 상위 컨테이너에 20도 기울이기를 적용한 경우 중첩된(이미지) div에 -20도의 기울이기 값을 지정합니다.

예제 코드:

설명하기 위해 다음은 컨테이너와 중첩된 div를 사용하는 예입니다.

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

이 코드는 빨간색 평행사변형 컨테이너가 20도 기울어졌습니다. 그 안에 이미지는 -20도 기울어진 중첩된 div에 배치되어 상위 컨테이너에 적용된 기울어짐을 효과적으로 반전시키고 그 뒤에 투명한 기울어진 영역을 드러냅니다.

위 내용은 투명한 영역을 사용하여 단면 CSS3 기울이기 변환 효과를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!