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!

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

HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
css小三角气泡效果,纯CSS实现聊天框小尖角、气泡效果
那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: 复制代码代码如下: .arrow { width:0; height:0; font-size:0; border:solid 10px ...
android录制3d照片,立体看世界：3D照片/3D视频录制_手机_手机Android频道-中关村在线...
3D拍照前面给大家介绍了双500万像素3D摄像头,相信大家对这个产品的拍照效果也是非常的重视.在拍摄3D照片之前需要将模式调到3D状态,这个时候屏幕就会变得有"景深",我们先来看 ...
HMS Core 3D Engine助您实现逼真3D渲染效果，构筑大型3D数字世界
HMS Core 3D Engine是一款高性能.高画质.高可靠的实时3D引擎,旨在帮助开发者制作高品质的3D应用.3D Engine将为您提供可编程渲染管线,多维粒子系统,3D角色与动画,超大地形地 ...
css实现人走路效果,纯css实现机器人走路动画
纯css实现机器人走路动画由于发现了css的这个现象当一个有元素嵌套的时候,父元素有动画,子元素也有动画,那么子元素的运动会相对父元素的运动而运动所以我忽然想到,实现人的走路动画并不是不可能的了 ...
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
【面试题】1014- 面试官：如何使用CSS完成视差滚动效果?
一.是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层.内容层.悬浮层当滚动鼠标滑轮的时候 ...

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

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

最新文章

热门文章