이번에는 3D 포토앨범 효과를 구현하는 방법을 알려드리겠습니다. 3D 포토앨범 효과를 구현하기 위한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
이 기사에서는 CSS3 속성을 사용하여 예제를 작성했습니다. 먼저 효과를 살펴보겠습니다.
일부 속성의 사용법은 이전에 설명했기 때문에 이 기사에서는 자세히 설명하지 않고 이 예제의 코딩 과정만 기록합니다. 프로젝트 코드가 마지막입니다.
Layout
html 레이아웃을 직접 보세요:
<p class="my-container"> <!-- 大容器 --> <p class="photo-wrap"> <!-- 舞台 --> <p class="container"> <!-- 相册容器 --> <p class="img img01"></p> <p class="img img02"></p> <p class="img img03"></p> <p class="img img04"></p> <p class="img img05"></p> <p class="img img06"></p> <p class="img img07"></p> <p class="img img08"></p> <p class="img img09"></p> </p> </p> </p>
Style
Large Container
가장 바깥쪽의 큰 컨테이너는 실제 상황에 따라 스타일을 정의할 수 있습니다.
.my-container { width: 800px; height: 500px; margin: 20px auto; }
Stage 요소
perspective 속성은 모든 하위 요소가 원근감 효과를 얻을 수 있도록 3D 공간을 활성화하는 데 사용됩니다(3D 변환을 사용하는 요소, 이 예에서는 앨범 컨테이너 요소).
.photo-wrap { perspective: 800px; width: 800px; }
앨범 컨테이너
앨범 컨테이너의 변환 스타일: 보존-3D 스타일은 모든 하위 요소가 3D 공간에서 렌더링된다는 것을 의미합니다.
.container { width: 800px; height: 500px; margin: 0 auto; position: relative; transform-style: preserve-3d; }
단일 요소
.img { width: 200px; height: 118px; line-height: 118px; text-align: center; position: absolute; top: 160px; left: 300px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset; background: pink; }
이제 브라우저에서 효과를 살펴보세요.
오른쪽 상단 그림에서 볼 수 있듯이 이제 각 그림은 동일한 위치에 고정됩니다. 분명히 이것은 우리가 원하는 효과가 아닙니다. 하지만 원하는 효과를 얻으려면 어떻게 변경해야 할까요?
이제 이 사진들은 컨테이너의 중심점에 평면 형태로 표시됩니다. 원을 형성하려면 회전 속성을 사용해야 합니다(Y축을 중심으로 회전해야 하므로 회전Y입니다). .
여기에는 총 9장의 사진이 있으므로 360/9=40도 단위에 따라 각 사진을 따로 회전시켜주세요.
.img01 { transform: rotateY(0deg); } .img02 { transform: rotateY(40deg); } .img03 { transform: rotateY(80deg); } .img04 { transform: rotateY(120deg); } .img05 { transform: rotateY(160deg); } .img06 { transform: rotateY(200deg); } .img07 { transform: rotateY(240deg); } .img08 { transform: rotateY(280deg); } .img09 { transform: rotateY(320deg); }
회전을 추가한 후 효과를 살펴보겠습니다.
이 사진은 더 이상 같은 평면에 있지 않지만 모두 함께 압축되어 있음을 발견했습니다. 각 사진을 300 앞으로 이동하려고 했습니다. 자체적으로(translateZ) Pixel을 실행하고 무슨 일이 일어나는지 확인하세요.
.img01 { transform: rotateY(0deg) translateZ(300px); } .img02 { transform: rotateY(40deg) translateZ(300px); } .img03 { transform: rotateY(80deg) translateZ(300px); } .img04 { transform: rotateY(120deg) translateZ(300px); } .img05 { transform: rotateY(160deg) translateZ(300px); } .img06 { transform: rotateY(200deg) translateZ(300px); } .img07 { transform: rotateY(240deg) translateZ(300px); } .img08 { transform: rotateY(280deg) translateZ(300px); } .img09 { transform: rotateY(320deg) translateZ(300px); }
회전과 움직임을 추가한 후의 효과:
이 시점에서 우리는 기대했던 효과를 얻었습니다. 각 사진 태그에 좋아하는 사진을 추가하면 끝!
Animation
이 사진 앨범을 움직이게 하려면 애니메이션을 추가하기만 하면 됩니다.
@keyframes rotateY360 { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
그런 다음 "Album Container" 컨테이너 요소에 애니메이션 속성을 추가하세요.
animation: rotateY360 15s ease-in-out infinite;
마지막으로 작업이 완료되었습니다.
더 흥미로운 내용을 보려면 이 기사의 사례를 읽은 후 방법을 마스터하셨을 것입니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!
추천 도서:
위 내용은 3D 포토앨범 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!