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

已于 2022-09-12 10:22:46 修改
阅读量3.8k 收藏 31
点赞数 10
分类专栏： Web交流分享 文章标签： 3d html css3
于 2020-03-25 16:04:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45652695/article/details/105096938
版权

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

1
　　首先先建一个空的文件夹，名字任意（这里命名为3D相册盒子版）。如图
　　　
在这里插入图片描述

2
　　在该文件夹中，再创建一个文件夹，用来存放要使用的图片，同级目录下还需创建两个text文档，注意：需要将文档后缀名改为html和css（由于html是用于web即网页开发的，所以更改文档后缀名后显示的是网站图标。），这点很重要.如图

在这里插入图片描述

3
　　将需要使用的图片放入保存图片的文件夹，最好将图片标号1~~6和0106，和一个背景图片，方便写代码时调用（当然，不嫌麻烦也就随便了），其中，16的图修为100x100大小的，01~06的修为400x400大小的。（可以使用网页版美图秀秀——>传送门）如图

在这里插入图片描述

4
　　然后在之前创好的html文档，右击编辑，进入编辑页面，复制以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D相册盒子版</title>
	<link type="text/css" href="逼格.css" rel="stylesheet" />
    <style type="text/css">
		body{background-image: url("./image/background.png");background-size: 100% 100%;background-attachment: fixed;}
	</style>
</head>
	<body>
		<div class="box">
			<ul class="minbox">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ol class="maxbox">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</body>
</html>

5
　　然后在之前创好的css文档(最好也命名为css），右击编辑，进入编辑页面，复制以下代码：

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(./image/01.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(./image/02.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(./image/03.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(./image/04.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(./image/05.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(./image/06.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(./image/1.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(./image/2.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(./image/3.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(./image/4.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(./image/5.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(./image/6.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -30px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -30px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -30px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -30px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -30px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

5
　　最后保存退出，然后双击该html文件即可成功！！！

参考链接：传送门

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

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

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

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

总是有人私信我说图片不显示，这里建议如果没有前端基础不会改代码，那就完全按着步骤来或者直接下载模板然后替换一下图片。

Chris Phantom
关注
专栏目录
手把手教你基于HTML、CSS搭建我的相册（下）
官方推荐
03-22 1万+
利用HTML、CSS搭建我的相册
html5 3D立体式图片相册
05-26
基于Html5+JS开发的3D立体图片相册，适用于所有浏览器，不支持IE8一下
WEB前端——three（立体相册，炫酷按钮）
最新发布
qq_68600196的博客
01-12 420
【代码】WEB前端——three。
H5-3D相册得生成
qq_40811171的博客
05-08 463
只需要替换图片路径就好 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title> <!--<link type="text/css" href="css/style.c...
3DMax—产品包装盒制作教程
youximoxingEDO的博客
06-18 4150
01 在前视图创建一个【长方体】，设置参数，长度为60，宽度为60，高度为60；长度分段、宽度分段和高度分段为1；如图所示。
html3d盒子相册源码,纯CSS3 3D盒子相册
weixin_39886024的博客
06-19 308
* {padding:0;margin:0;}body,html {background:#f0f0f0;}:root {--width:600px;--height:400px;}.content {width:600px;margin:100px auto;}.box {position:relative;perspective:500px;background:#fff;overflow:h...
3d相册制作代码
09-14
3d相册制作代码，欢迎大家来下载，保你满意开心，希望你能下载
3d相册制作源代码_制作相册网站优化
weixin_39592026的博客
11-15 467
随着网络营v3cef6销推广时代的发展，网络优化与推广逐渐到来，各行业企业纷纷投入网络推广建设。为了在搜索引擎优化领域站稳脚跟，除了网站优化的技术能力外，SEO营销思维的创新也非常重要。只有满足用户的需求，提高网站的用户体验，才能真正迎来网络SEO流量的“繁荣”。如今，越来越多的企业在推广自己的网站。为了获得更高的网站排名，首先要增强网站与搜索引擎之间的信任。优化制作相册网站它包括图像、视频和文本...
3D 旋转相册 立方体的盒子 相册(源码分享)
preserveXing的博客
03-14 2412
效果图 css代码 *{ margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; background-color: #333; min-height: 100vh; perspective: 1000px; } //构建 3D的空间 .con{ position: relative; w.
3D动画相册和旋转木马相册.rar
11-29
抖音上很火的3D立体动态相册实现代码，图片需要经过裁剪处理，但是设置了background-size:cover;属性，如果图片不是过分宽高比失衡，都是可以接受的。 纯JavaScript实现 旋转木马/3d相册特效(鼠标拖拽旋转)单纯使盒子转动就可以实现旋转木马，可以使用setinterval来不断使其旋转。 如果想使用鼠标拖动实现旋转木马，则需要再加一些代码，使装有盒子的容器(wrap)能够根据鼠标坐标变化绕容器(wrap)自身y轴转动。
jQuery结合LightBox实现图片滚动 图片盒子.rar
07-10
jQuery结合LightBox实现的图片展示 图片盒子，图片滚动过程中，可通过控制按钮控制滚动方向，单击小图片后，在当前页无刷新显示出放大图片，结合LightBox可实现 渐变动画效果的图片放大效果，代码中引入了jquery，且代码中运用有HTML5/CSS3技术，历此测试请在火狐或Chrome下进行。
如何用python制作3d游戏_【教程】12个步骤让你快速学会制作3D游戏
weixin_39575565的博客
12-03 1万+
原标题：【教程】12个步骤让你快速学会制作3D游戏 Unity3D不仅是一款功能强大且易于上手的游戏引擎，更重要的是，它还可以被免费下载(它还有一个功能更强大的付费版，但其实你可以使用免费版本完成绝大部分工作)。你大可不必被它的名字误导，Unity既可以创建2d游戏也可以创建3d游戏。你可以使用C#, Java, 或者一种和Python类似的称为 Boo的语言进行编程。在本教程中，我将带你熟悉Un...
手把手教你基于HTML、CSS搭建我的相册（上）
热门推荐
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
3d相册制作源代码_常用的10钟GIF图制作工具
weixin_39872893的博客
11-04 471
运营的小事，用心听运营GIF动画目前在各种文案编辑中越来越常见，可以比文字更清晰，并且表述力大于图片。这时候，选择一款方便好用的编辑器就显得相当重要啦！如何让你的GIF在毫无low感的同时提升你文案逼格呢？作为一个资深GIF动图爱好者，小编认为有必要研究并讨论一下，各种GIF动图制作方法的优劣，以方便大家选择适合自己的方法。运营人常用的GIF动图制作工具有哪些？一、小猪动图小猪动图是一个...
3d相册制作源代码_Arduino+3D打印制造视觉暂留显示器
weixin_39621860的博客
11-22 418
MAKER: theSTEMpedia／译：趣无尽人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，也被称为是“视觉暂留”。人眼每秒处理的图像不超过 10-12 个。当一系列图像很快的连续性的滚动时，就会让我们产生幻觉，感觉画面在动。这也是制作动画电影的基本原则。本期给大家带来一款别出心裁的 LED 显示器，用 ...
前端动画——3D立方体盒子
果冻
05-10 581
前言 学动画的时候看到的，很有意思，有兴趣可以看全文 CSS 怎样写一个动画（从基础动画到3d动画) 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
css3设计动态立体盒子,【CSS3练习】3D盒子制作
weixin_29243279的博客
08-03 801
先发个3D盒子最终效果图制作步骤1：创建基本结构分布把6个面定义到3×3的画布上，1和4暂且是重叠的。html结构比较简单：123456CSS部分：*{margin:0;padding:0;}.box{margin:50px auto; 300px;height: 300px; border:1px solid #ccc;position: relative;}.layer{background-...
html简单盒子代码,CSS3 3D盒子超简单制作
weixin_34334554的博客
06-09 2301
这是我第一次在这里写文章，如果写得不好的话，请大家多多包涵一下。在XX网学完CSS3之后，然后我懂了一个道理，XX网评论区域存在一个小明梗，这个梗是这样的：1+1=2, 2+2=4，问小明今年多少岁 = 。= 原因是XX网教的基础是非常的基础，一到实战就GG了。看完CCS3课程后，自己尝试手写一下3D盒子的切换，虽然不是很炫。但是为了来练练手，顺便检查一下自己的学习成果，写了一个超鸡简单的鼠标...
零基础打造HTML 3D盒子相册教程
"这篇教程将指导零基础的学习者如何创建一个3D盒子相册，主要使用HTML技术。这个项目不需要任何特殊软件，只需要一台电脑和简单的编程操作。通过跟随教程，你可以为你的特别之人制作一个炫酷的3D立体相册。首先，你...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值