教你零基础制作3D旋转相册（送给那个她~）

3D立体相册？
　　是的，相信大家或多或少的会在一些地方看到某些程序员用代码给自己女朋友写3D立体相册，那么你会不会也想自己手动敲出那些炫酷的代码呢？
　　那你是找对地方了。废话不多说，今天为大家分享利用html实现3D旋转效果。不用怕，不需要什么软件的，只需要一个电脑和，一只手！
在线演示效果：传送门（自己的服务器，没cdn，首屏可能会有点慢）（文末有模板文件下载）
另外一个3D盒子相册链接：传送门（喜欢的可以点赞支持）

1
　　首先先建一个空的文件夹，名字任意。如图
　　　　
2
　　在该文件夹中，再创建一个文件夹，用来存放要使用的图片，同级目录下还需创建一个text文档，注意：需要将文档后缀名改为html（由于html是用于web即网页开发的，所以更改文档后缀名后显示的是网站图标。），这点很重要.如图
　　　　
3
　　将需要使用的图片放入保存图片的文件夹，最好将图片标号1~n，和一个背景图片，方便写代码时调用（当然，不嫌麻烦也就随便了）。如图
4
　　然后在之前创好的html文档，右击编辑，进入编辑页面，复制以下代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>3D旋转相册</title><style type="text/css">*{padding: 0;margin: 0;}body,html{height:100%;}body{background-image: url("./这个文件夹用来放图片/background.jpg");background-size: 100% 100%;background-attachment: fixed;}#box{width: 280px;height: 400px;position: fixed;left: 0;right: 0;top:0100;bottom: 0;margin: auto;transform-style: preserve-3d;transform: rotateX(0deg) rotateY(0deg);animation: go 45s linear infinite;}#box img{width: 189px;height: 270px;position: absolute;left: 0;top: 0;}#box img:nth-child(1){transform: rotateY(0deg) translateZ(650px);}#box img:nth-child(2){transform: rotateY(36deg) translateZ(650px);}#box img:nth-child(3){transform: rotateY(72deg) translateZ(650px);}#box img:nth-child(4){transform: rotateY(108deg) translateZ(650px);}#box img:nth-child(5){transform: rotateY(144deg) translateZ(650px);}#box img:nth-child(6){transform: rotateY(180deg) translateZ(650px);}#box img:nth-child(7){transform: rotateY(216deg) translateZ(650px);}#box img:nth-child(8){transform: rotateY(252deg) translateZ(650px);}#box img:nth-child(9){transform: rotateY(288deg) translateZ(650px);}#box img:nth-child(10){transform: rotateY(324deg) translateZ(650px);}#box img:nth-child(11){transform: rotateY(360deg) translateZ(650px);}@keyframes go {0%{transform: rotateX(0deg) rotateY(0deg);}25%{transform: rotateX(20deg) rotateY(180deg);}50%{transform: rotateX(0deg) rotateY(360deg);}75%{transform: rotateX(-20deg) rotateY(540deg);}100%{transform: rotateX(0deg) rotateY(720deg);}}</style>
</head><body><div id="box"><img src="./这个文件夹用来放图片/1.jpg"><img src="./这个文件夹用来放图片/2.jpg"><img src="./这个文件夹用来放图片/3.jpg"><img src="./这个文件夹用来放图片/4.jpg"><img src="./这个文件夹用来放图片/5.jpg"><img src="./这个文件夹用来放图片/6.jpg"><img src="./这个文件夹用来放图片/7.jpg"><img src="./这个文件夹用来放图片/8.jpg"><img src="./这个文件夹用来放图片/9.jpg"><img src="./这个文件夹用来放图片/10.jpg"><img src="./这个文件夹用来放图片/11.jpg"></div></body>
</html>

5
　　最后，只需要将代码块的部分修改一下：
　　1.将代码中的“这个文件夹用来放图片”改为你创建的时候用来放图片的文件夹名称（如：image）。如图

　　2.将各个图片的间距修改一下，间距即为：360除以（你使用的图片的个数+1）。如图
　　例如这里有11张图片，即12个空隙，所以平分360度即是每个空隙需要的间距了。
　　3.如果觉得图片的大小不喜欢，可以自己修改（最好还是成比例的），即如图数据：
6
　　最后保存退出，然后双击该html即可成功！！！

后言
　　学到这里，还不赶紧去尝试尝试，去给你的那个她来一份惊喜吧！
　　html,css等对于未学习过的人来说就是一潭深水，它的效果可以很强，由于我也只是一个萌新，所以可能并没有别的3D相册炫酷，但是这一个绝对是简单易用了。如果有兴趣的，可以去学习一下！如有问题，欢迎留言~~ 排版不易，喜欢的请点赞分享啊！！

=================== 更新 ====================

部分读者尝试教程之后出现不成功的情况，由于当时教程的文件夹已删除，我又另创新的模板，并上传了，大家可自行修改。模板下载链接: https://pan.baidu.com/s/1yFgvDOLEmVGE7u3E2rgCYQ 提取码: mhe1 复制这段内容后打开百度网盘手机App，操作更方便哦

教你零基础制作3D旋转相册（送给那个她~）相关推荐

HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
小白教你制作3D旋转相册
小编通过一段时间对于网页的学习,心血来潮写下了这篇博文,教你如何制作炫酷的相册动画,用了一些关于程序的图片,你们可以换成"女朋友照片墙".同时在学习的过程中,也学到了一些其他的知识 ...
用HTML+CSS代码制作3D旋转相册
我的开源管理系统:Vue 3.2 + TypeScript+ Pinia + Vite2 + Element-Plus Gitee 仓库:https://gitee.com/laramie/Geeke ...
如何用html5制作3d旋转照片集
最近男友生日要到了,于是,我上网搜索如何制作照片集,作为男友的生日礼物之一,在我耗费几小时之后,终于成功了,撒花撒花~ 看完这篇文章,即使你完全不会html也可以制作成功首先,你需要下载一个软件-- ...
纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
制作一个3D旋转相册
利用HTML常用标签,CSS常用属性,JS入门语法制作一个3D旋转相册 part one 完成<个人相册>项目登录页面代码如下,如有需要请自行整合 #but1{ background- ...
Html 3D旋转相册制作
程序示例精选 Html 3D旋转相册制作如需安装运行环境或远程调试,见文章底部微信名片,由专业技术人员远程协助! 前言这篇博客针对<<Html 3D旋转相册制作>>编写代 ...
3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
我对象说陪我过七夕，象说没时间，我一怒给女神做了一个某音上很火的3D旋转相册
大家好,我是辣条. 七夕快到了,有人开心有人愁,辣条就是愁的那个,辣条也是有女朋友的,就是太废打气筒了,隔三差五就要充气,阿西吧... 今天这篇博客就是演示做一个前端3D旋转相册,学会的小伙伴可以给自 ...

教你零基础制作3D旋转相册（送给那个她~）

教你零基础制作3D旋转相册（送给那个她~）相关推荐

最新文章

热门文章