Réalisation de l'effet album photo 3D

Cette fois, je vais vous présenter la réalisation de l'effet album photo 3D. Quelles sont les précautions pour obtenir l'effet album photo 3D. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Cet article utilise les attributs CSS3 pour écrire un exemple. Sans plus tarder, examinons d'abord l'effet.

Étant donné que l'utilisation de certains attributs a déjà été expliquée, cet article n'entrera pas dans les détails. Il enregistrera uniquement le processus de codage de cet exemple. Le code du projet est le dernier.

Mise en page

Regardez directement la mise en page 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

Grand conteneur

Le grand conteneur le plus à l'extérieur peut simplement définir le style en fonction de la situation réelle.

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

Élément de scène

l'attribut perspective permet d'activer un espace 3D afin que tous ses sous-éléments aient un effet de perspective (éléments utilisant la transformation 3D, cet exemple qui est l'élément conteneur album).

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

Conteneur d'album

Le style transform-style:preserve-3d;du conteneur d'album signifie que tous les éléments enfants sont rendus dans l'espace 3D.

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

Élément unique

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

Regardez maintenant l'effet dans le navigateur :

Comme vous pouvez le voir dans le image en haut à droite, maintenant toutes les images sont toutes fixées dans la même position. Ce n’est évidemment pas l’effet que nous souhaitons. Mais si nous voulons obtenir l’effet souhaité, comment devons-nous le modifier ?

Maintenant, ces images sont affichées sous une forme plate au centre du conteneur. Si vous souhaitez former un cercle, vous devez utiliser l'attribut de rotation (car il doit tourner autour de l'axe Y, donc c'est rotationY).

Il y a un total de 9 images ici, alors faites pivoter chaque image séparément selon l'unité de 360/9 = 40 degrés.

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

Après avoir ajouté la rotation, jetez un œil à l'effet :

Nous avons constaté que ces images ne sont plus sur le même plan, mais elles sont tous serrés ensemble. Essayez de déplacer chaque image de 300 pixels devant elle (translateZ) et voyez ce qui se passe.

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

L'effet après avoir ajouté la rotation et le mouvement :

À ce stade, nous avons obtenu l'effet que nous attendions. Ajoutez vos photos préférées à chaque balise d'image et vous êtes prêt à partir !

Animation

Si vous souhaitez faire bouger cet album photo, ajoutez simplement une animation.

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

Ajoutez ensuite des attributs d'animation à l'élément conteneur "Album Container" :

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

Enfin, vous avez terminé :

Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Résumé de la disposition centrée du CSS

Le côté gauche est fixe et le côté droit est adaptatif disposition

Disposition du flux en cascade et effet d'album photo à chargement infini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!