HTML+CSS做出3D照片效果（HTML+CSS for 3D photo effect）

2022.10.14大家好，我最近看到一个关于用HTML+CSS实现的3D照片觉得非常好看，如图：

Hello everyone, I recently saw a 3D photo about using HTML+CSS and thought it was very nice, as shown in the picture:

 效果有点像魔方，而且可以翻转，具体如何实现，接下来就让我和大家说一说。

 The effect is a bit like a Rubik's cube, and it can be flipped. Let me tell you how to achieve it.

（1）创建HTML文件

Creating an HTML file

（2）编写div

write div

写六个div存放6张图片。

Write six DIVs for six images.

<div class="box">

        <div class="qian">
            <img src="./img/qian.jpg">
        </div>

        <div class="hou">
            <img src="./img/hou.jpg">
        </div>

        <div class="shang">
            <img src="./img/shang.jpg">
        </div>

        <div class="xia">
            <img src="./img/xia.jpg">
        </div>

        <div class="zuo">
            <img src="./img/zuo.jpg">
        </div>

        <div class="you">
            <img src="./img/you.jpg">
        </div>

    </div>

（3）编写CSS

write css

div {
    width: 300px;
    height: 300px;
}

.box {
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    padding-left: 400px;
    padding-top: 300px;
    animation: move 50s linear infinite;
}

img {
    width: 300px;
    height: 300px;
}

.box:hover {
    transform: rotateX(360deg) rotateY(360deg);
}

.qian {
    background-color: pink;
    position: absolute;
    transform: translateZ(150px);
}

.hou {
    background-color: blue;
    position: absolute;
    transform: translateZ(-150px);
}

.shang {
    background-color: bisque;
    position: absolute;
    transform: translateY(-150px) rotateX(90deg);
}

.xia {
    background-color: aqua;
    position: absolute;
    transform: translateY(150px) rotateX(90deg);
}

.zuo {
    background-color: rebeccapurple;
    position: absolute;
    transform: translateX(-150px) rotateY(90deg);
}

.you {
    background-color: orange;
    position: absolute;
    transform: translateX(150px) rotateY(90deg);
}

div div {
    opacity: 0.9;
}

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

.box:hover .qian {
    width: 300px;
    height: 300px;
    transform: translateZ(200px);
}

.box:hover .hou {
    width: 300px;
    height: 300px;
    transform: translateZ(-200px);
}

.box:hover .zuo {
    width: 300px;
    height: 300px;
    transform: translateX(-200px) rotateY(90deg);
}

.box:hover .you {
    width: 300px;
    height: 300px;
    transform: translateX(200px) rotateY(90deg);
}

.box:hover .shang {
    width: 300px;
    height: 300px;
    transform: translateY(200px) rotateX(90deg);
}

.box:hover .xia {
    width: 300px;
    height: 300px;
    transform: translateY(-200px) rotateX(90deg);
}

这样就可以实现3D照片的效果。

This allows you to create a 3D photo.

大家喜欢的话点个赞，支持一下！

If you like it, click a like and support it!