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!