중심 기울어짐을 유지하면서 기울어진 이미지 갤러리의 가장자리를 어떻게 풀 수 있습니까?

비뚤어진 여러 이미지의 끝 부분 비뚤어짐 풀기

이전에는 여러 이미지를 효과적으로 비뚤어지게 만드는 방법이 연구되었습니다. 그러나 기울어진 이미지 컨테이너의 맨 왼쪽(상자 1)과 맨 오른쪽(상자 6) 끝을 기울이지 않으려는 시도에서 문제가 발생했습니다.

향상된 솔루션은 다음과 같습니다.

제공된 CSS 코드는 내부 이미지의 기울어진 모양을 유지하면서 컨테이너 내 맨 왼쪽 및 맨 오른쪽 이미지의 기울어짐을 효과적으로 변경합니다. 이미지.

구현:

1. 상위 컨테이너 생성:

   • 이미지의 상위 역할을 하는 "갤러리" 클래스가 있는 컨테이너 요소 collection.

2. 기울기 변수 설정:

   • 기울어진 크기를 제어하는 ​​변수 --s를 초기화합니다.

3. 갤러리 스타일 지정:

   • CSS 그리드를 사용하여 이미지를 연속으로 정렬하고 세로 중앙에 배치합니다. .
   • 이미지 너비를 0으로, 최소 너비를 calc(100%)로 정의합니다. var(--s))를 사용하여 왼쪽 경사를 만들고 다각형 클립 경로를 사용하여 이미지를 잘라 원하는 모양을 얻습니다.
   • CSS 전환을 활용하여 마우스 오버 시 이미지에 애니메이션을 적용합니다.

4. 처음과 끝 조정 이미지:

   • 첫 번째 이미지의 최소 너비를 조정하고(calc(100% var(--s)/2)) place-self를 사용합니다. 왼쪽 가장자리.
   • 마지막 이미지에 대해 프로세스를 반복하되, place-self: 종료하고 클립 경로를 조정하여 오른쪽에서 기울이기 시작 edge.

5. 호버 효과 구성(선택 사항):

   • 원하는 경우 CSS를 추가하여 호버 효과를 활성화합니다. 선택한 이미지를 확장하여 동적 갤러리를 생성합니다.

이점:

• 이 솔루션을 사용하면 내부 이미지에 영향을 주지 않고 최종 이미지의 기울어짐을 제어할 수 있습니다. .
• 호버 효과는 추가적인 상호작용성과 시각적 효과를 제공합니다. 매력이 있습니다.
• 코드는 모듈식이며 특정 디자인 요구 사항에 맞게 쉽게 사용자 정의할 수 있습니다.

위 내용은 중심 기울어짐을 유지하면서 기울어진 이미지 갤러리의 가장자리를 어떻게 풀 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!