Realisierung eines 3D-Fotoalbumeffekts

Dieses Mal werde ich Ihnen die Realisierung des 3D-Fotoalbum-Effekts vorstellen. Was sind die Vorsichtsmaßnahmen, um den 3D-Fotoalbum-Effekt zu erzielen? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Dieser Artikel verwendet CSS3-Attribute, um ohne weiteres einen Blick auf den Effekt zu werfen.

Da die Verwendung einiger Attribute bereits erläutert wurde, wird in diesem Artikel nicht auf Details eingegangen, sondern nur auf den Codierungsprozess dieses Beispiels. Der Projektcode ist der letzte.

Layout

Schauen Sie sich direkt das HTML-Layout an:

    <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>

Stil

Großer Behälter

Der äußerste große Behälter kann den Stil einfach entsprechend der tatsächlichen Situation definieren.

    .my-container {        
        width: 800px;
        height: 500px;
        margin: 20px auto;
    }

Bühnenelement

Perspektivattribut wird verwendet, um einen 3D-Raum zu aktivieren, sodass alle seine Unterelemente einen perspektivischen Effekt haben (Elemente mit 3D-Transformation, In diesem Beispiel handelt es sich um das Album-Containerelement.

    .photo-wrap {
        perspective: 800px;
        width: 800px;
    }

Albumcontainer

Der Transform-Style: Preserve-3D;-Stil des Albumcontainers bedeutet, dass alle untergeordneten Elemente im 3D-Raum gerendert werden.

    .container {
        width: 800px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        transform-style: preserve-3d;
    }

Einzelnes Element

    .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;
    }

Sehen Sie sich nun den Effekt im Browser an:

Wie Sie aus dem sehen können Bild oben rechts, jetzt alle Die Bilder sind alle an der gleichen Position fixiert. Offensichtlich ist dies nicht der Effekt, den wir wollen. Aber wenn wir den gewünschten Effekt erzielen wollen, wie sollten wir ihn ändern?

Jetzt werden diese Bilder flach im Mittelpunkt des Containers angezeigt. Wenn Sie einen Kreis bilden möchten, müssen Sie das Rotationsattribut verwenden (da er sich also um die Y-Achse drehen muss). es ist rotierenY).

Es gibt hier insgesamt 9 Bilder, also drehen Sie jedes Bild separat entsprechend der Einheit 360/9=40 Grad.

    .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);
    }

Sehen Sie sich nach dem Hinzufügen der Rotation den Effekt an:

Wir haben festgestellt, dass diese Bilder nicht mehr auf derselben Ebene liegen, aber sie werden alle zusammengedrückt. Versuchen Sie, jedes Bild 300 Pixel vor sich selbst zu verschieben (translateZ) und sehen Sie, was passiert.

    .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);
    }

Der Effekt nach dem Hinzufügen von Rotation und Bewegung:

Zu diesem Zeitpunkt haben wir den erwarteten Effekt erreicht. Fügen Sie Ihre Lieblingsfotos zu jedem Bild-Tag hinzu und schon kann es losgehen!

Animation

Wenn Sie dieses Fotoalbum bewegen möchten, fügen Sie einfach eine Animation hinzu.

    @keyframes rotateY360 {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(360deg);
        }
    }

Dann fügen Sie dem Containerelement „Albumcontainer“ Animationsattribute hinzu:

 animation: rotateY360 15s ease-in-out infinite;

Endlich sind Sie fertig:

Glauben Sie es Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung des zentrierten CSS-Layouts

Die linke Seite ist fest und die rechte Seite ist adaptiv Layout

Wasserfall-Flow-Layout und unendlich ladender Fotoalbum-Effekt

Das obige ist der detaillierte Inhalt vonRealisierung eines 3D-Fotoalbumeffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!