超级酷炫的 3D 照片墙-软猫库

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> 标题</title>
</head>
<style>
    body {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
        background: #efb3d5;
    }

    .container {
        position: relative;
        margin-top: 50px;
    }

    .stage {
        position: relative;
        width: 800px;
        height: 240px;
        margin: 20px auto;
        perspective: 2000px;
        transform-style: preserve-3d;
        -webkit-box-reflect: below 10pxlinear-gradient(transparent, rgba(239, 179, 213, 0.8));
    }

    .stage.control {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
        animation: rotate 30s linear infinite;
    }

    .stage.control.imgWrap {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-style: preserve-3d;
    }

    .stage.control.imgWrap.img {
        position: absolute;
        width: 500px;
        height: 400px;
        line-height: 400px;
        text-align: center;
        font-size: 120px;
        top: 0;
        left: 0;
        object-fit: cover;
        transform-style: preserve-3d;
        transform-origin: 50%50%0px;
    }

    .stage.control.imgWrapimg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

    .stage.control.imgWrap.img1 {
        transform: rotateY(80deg) translateZ(650px);
    }

    .stage.control.imgWrap.img2 {
        transform: rotateY(125deg) translateZ(650px);
    }

    .stage.control.imgWrap.img3 {
        transform: rotateY(170deg) translateZ(650px);
    }

    .stage.control.imgWrap.img4 {
        transform: rotateY(215deg) translateZ(650px);
    }

    .stage.control.imgWrap.img5 {
        transform: rotateY(260deg) translateZ(650px);
    }

    .stage.control.imgWrap.img6 {
        transform: rotateY(305deg) translateZ(650px);
    }

    .stage.control.imgWrap.img7 {
        transform: rotateY(350deg) translateZ(650px);
    }

    .stage.control.imgWrap.img8 {
        transform: rotateY(395deg) translateZ(650px);
    }

    @keyframes rotate {
        0% {
            transform: translateZ(-2000px) rotateY(0deg);
        }

        35% {
            transform: translateZ(-2000px) rotateY(-250deg);
        }

        70% {
            transform: translateZ(-2000px) rotateY(-500deg);
        }

        100% {
            transform: translateZ(-2000px) rotateY(-720deg);
        }
    }
</style>

<body>
    <div class="container">
        <div class="stage">
            <div class="control">
                <div class="imgWrap">
                    <div class="img img1">
                        <img src="./img/p1.jpg" />
                    </div>
                    <div class="img img2">
                        <img src="./img/p2.jpg" />
                    </div>
                    <div class="img img3">
                        <img src="./img/p3.jpg" />
                    </div>
                    <div class="img img4">
                        <img src="./img/p4.jpg" />
                    </div>
                    <div class="img img5">
                        <img src="./img/p5.jpg" />
                    </div>
                    <div class="img img6">
                        <img src="./img/p6.jpg" />
                    </div>
                    <div class="img img7">
                        <img src="./img/p7.png" />
                    </div>
                    <div class="img img8">
                        <img src="./img/p8.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

HTML 结构

container：主容器，用于居中显示舞台（stage）。
stage：舞台，用于创建 3D 效果的容器。
control：控制容器，包含所有图片，并在 3D 空间中旋转。
imgWrap：图片包装器，用于包含所有图片元素。
img img1 至 img img8：每个类名为 img 的 div 元素包含一个图片，并通过不同的 imgX 类来区分和定位。

CSS 样式

body：设置页面的显示方式、外边距和背景色。
.container：设置容器的位置和外边距。
.stage：设置舞台的尺寸、位置、透视和 3D 样式。
.stage .control：设置控制容器的尺寸、3D 样式和动画。
.stage .control .imgWrap：设置图片包装器的位置和 3D 样式。
.stage .control .imgWrap .img：设置图片的尺寸、位置和 3D 样式。
.stage .control .imgWrap img：设置图片的尺寸和圆角。
.stage .control .imgWrap .img1 至.stage .control .imgWrap .img8：为每张图片设置不同的 3D 旋转和位置。
@keyframes rotate：定义一个关键帧动画，用于控制图片轮播的旋转效果。

THE END

html 代码

超级酷炫的 3D 照片墙

HTML 结构

CSS 样式

请登录后发表评论