Realization of 3D photo album effect

This time I will bring you the implementation of the 3D photo album effect. What are the precautions to achieve the 3D photo album effect. The following is a practical case, let’s take a look.

This article uses CSS3 properties to write an example. Without further ado, let’s take a look at the effect first.

Because the usage of some attributes has been explained before, this article will not go into details. It will only record the coding process of this example. The project code is the last.

Layout

Look directlyhtml layout:

    <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

Just define the style of the outermost large container according to the actual situation.

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

Stage element

Theperspective attribute is used to activate a 3D space so that all its sub-elements will obtain a perspective effect (elements using 3D transformation, in this example also It is the album container element).

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

Album container

The transform-style: preserve-3d; style of the album container means that all child elements are rendered in 3D space.

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

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

Now look at the effect in the browser:

As can be seen in the upper right picture, each picture is now fixed in the same location. Obviously this is not the effect we want. But if we want to achieve the desired effect, how should we change it?

Now these pictures are displayed in a flat form at the center point of the container. If you want to form a circle, you need to use the rotation attribute (because it needs to rotate around the Y axis, so it is rotateY) .

There are a total of 9 pictures here, so rotate each picture separately according to the unit of 360/9=40 degrees.

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

After adding rotation, look at the effect:

We found that these pictures are no longer on the same plane, but they are all squeezed together. We tried Move each image 300 pixels in front of itself (translateZ) and see what happens.

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

The effect after adding rotation and movement:

At this point, we have achieved the effect we expected. Add your favorite photos to each picture tag, and you’re done!

Animation

If you want to make this photo album move, just add an animation.

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

Then add animation attributes to the "Album Container" container element:

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

Finally, you're done:

I believe you have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Summary of centered layout of CSS

##Fixed on the left and adaptive layout on the right

Waterfall flow layout and infinite loading picture album effect

The above is the detailed content of Realization of 3D photo album effect. For more information, please follow other related articles on the PHP Chinese website!