비뚤어진 여러 이미지 모음의 끝 부분 비뚤어짐 풀기
이전 질문에서 여러 이미지를 비뚤어지게 하는 해결책을 찾았습니다. 코드는 각 이미지의 크기 조정을 허용했지만 컨테이너 내부 부분 내에서만 맨 왼쪽 및 맨 오른쪽 상자를 기울이는 원하는 효과를 제공하지 못했습니다.
이를 달성하기 위해 보다 세련된 솔루션 CSS-Tricks에 게시된 기사에서 시연된 것처럼 제작되었습니다. 이 방법을 사용하면 이미지 사이에 호버 효과와 간격을 추가할 수 있습니다.
The New Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .gallery {
--s: 50px;
display: grid;
height: 350px;
gap: 8px;
grid-auto-flow: column;
place-items: center;
}
.gallery > img {
width: 0;
min-width: calc(100% + var (--s));
height: 0;
min-height: 100%;
object-fit: cover;
clip-path: polygon( var (--s) 0,100% 0,calc(100% - var (--s)) 100%,0 100%);
cursor: pointer;
transition: .5s;
}
.gallery > img:hover {
width: 15vw;
}
.gallery > img:first-child {
min-width: calc(100% + var (--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var (--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var (--s)/2);
place-self: end ;
clip-path: polygon( var (--s) 0,100% 0,100% 100%,0 100%);
}
body {
margin: 0;
min-height: 100vh;
display: grid;
align-content: center;
background: #ECD078;
|
로그인 후 복사
위 내용은 CSS 그리드 컨테이너에서 이미지 끝 부분만 기울이는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!