HTML&CSS：超级酷炫的3D照片墙

这段代码创建了一个 3D 图片轮播效果，其中包含 8 张图片。图片在 3D 空间中围绕 Y 轴旋转，形成一个循环的轮播效果。CSS 的@keyframes 动画定义了图片的旋转路径，而 transform-style: preserve-3d 属性确保了 3D 效果的正确显示。每张图片通过不同的 rotateY 和 translateZ 属性定位在 3D 空间中的不同位置。点击获取更多

演示效果

HTML&CSS

html 复制代码

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>公众号关注：前端Hardy</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 10px linear-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 .imgWrap img {
        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>
<script></script>

</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：定义一个关键帧动画，用于控制图片轮播的旋转效果。