创建CSS3 3D透明照片墙效果-优快云博客

本文链接：https://blog.youkuaiyun.com/github_34514750/article/details/51866392

本文介绍如何使用CSS3实现3D透明照片墙效果，通过四个步骤：准备照片、子元素简单变换、translateZ变换和父元素动画，最终达到旋转木马形状的3D视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.准备n张照片

div放入照片，在同一个父级容器下

设置父类的transform-style:preserve-3d和persepective

六个div设置成绝对定位，重叠在一起

2.子元素做简单的变换，成旋转木马形状图片

子元素用transform:rotate旋转

因此是绕 Y 轴的，我们关心的是 rotateY 的大小，根据我们添加的图片数量，用 360° 的圆周角将每个图片等分，也就是让每张图片绕 Y 轴旋转固定角度依次散开

3.每个子元素做translateZ变换

N 张图片设定一个 translateZ 后，图片就很自然以中点为圆心分散开了

4.父元素做动画

最后利用 animation ，也就是包裹着图片的容器绕 Y 轴旋转起来（rotateY）或者绕X,Y,Z旋转，那么一个类似旋转木马的 3D 照片墙效果就完成了！

https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A%A8%E7%94%BB%E8%AE%BE%E8%AE%A1/3D%E9%80%8F%E6%98%8E%E7%85%A7%E7%89%87%E5%A2%99

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <link href="index.css" rel="stylesheet">
    </head>

    <body>
        <div class="container">
            <div class="box box1"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>
            <div class="box box5"></div>
            <div class="box box6"></div>
        </div>
    </body>
</html>

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    height: 100%;
    background: black;
}

.container{
    height: 100%;
    position: relative;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform: rotateX(-20deg) rotateY(20deg);
    -moz-transform: rotateX(-20deg) rotateY(20deg);
    -o-transform: rotateX(-20deg) rotateY(20deg);
    transform: rotateX(-20deg) rotateY(20deg);

    -webkit-animation:move 10s infinite;
    -moz-animation:move 10s infinite;
    -o-animation:move 10s infinite;
    animation: move 10s infinite;
}

.box{
    position: absolute;

    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -100px;

}

.box1{
    -webkit-transform: rotateY(60deg) translateZ(400px);
    -moz-transform: rotateY(60deg) translateZ(400px);
    -o-transform: rotateY(60deg) translateZ(400px);
    transform: rotateY(60deg) translateZ(400px);
    background:rgba(222,134,128,0.5);
}

.box2{
    -webkit-transform: rotateY(120deg) translateZ(400px);
    -moz-transform: rotateY(120deg) translateZ(400px);
    -o-transform: rotateY(120deg) translateZ(400px);
    transform: rotateY(120deg) translateZ(400px);
    background: rgba(100,127,255,0.5);
}

.box3{
    -webkit-transform: rotateY(180deg) translateZ(400px);
    -moz-transform: rotateY(180deg) translateZ(400px);
    -o-transform: rotateY(180deg) translateZ(400px);
    transform: rotateY(180deg) translateZ(400px);
    background: rgba(80,153,204,0.5);
}

.box4{
    -webkit-transform: rotateY(240deg) translateZ(400px);
    -moz-transform: rotateY(240deg) translateZ(400px);
    -o-transform: rotateY(240deg) translateZ(400px);
    transform: rotateY(240deg) translateZ(400px);
    background: rgba(0,204,255,0.5);
}

.box5{
    -webkit-transform: rotateY(300deg) translateZ(400px);
    -moz-transform: rotateY(300deg) translateZ(400px);
    -o-transform: rotateY(300deg) translateZ(400px);
    transform: rotateY(300deg) translateZ(400px);
    background: rgba(153,204,255,0.5);
}

.box6{
    -webkit-transform:translateZ(400px);
    -moz-transform:translateZ(400px);
    -o-transform:translateZ(400px);
    transform:translateZ(400px);
    background: rgba(0,255,255,0.5);
}

@-webkit-keyframes move{
    0%{
        -webkit-transform: rotate3d(0deg,0deg,0deg);
    }
    100%{
        -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@-moz-keyframes move{
    0%{
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@-o-keyframes move{
    0%{
        -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        -o-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}

@keyframes move {
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
    }
}