3D 포토앨범 효과 구현

이번에는 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 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 도서:

CSS 중앙 레이아웃 요약

왼쪽은 고정되고 오른쪽은 적응형 레이아웃 방식

폭포 흐름 레이아웃 및 무한 로딩 사진 앨범 효과

위 내용은 3D 포토앨범 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!