3D旋转相册（附源码+素材）

已于 2022-12-24 11:54:40 修改
阅读量1w 收藏 248
点赞数 49
文章标签： 3d css css3
于 2022-12-03 15:43:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45345143/article/details/128160014
版权

所用工具皆为系统自带，方便实现功能。

文章目录

效果展示

在这里插入图片描述

一、创建整个文件的根目录

再桌面上新建一个文件夹，并且命名为：3D相册
在这里插入图片描述

二、创建3D相册内部文件

1.创建index.html

1.双击进入 3D相册 文件夹，并创建一个新的txt文本文件。
在这里插入图片描述
2.把下面代码复制到新建文本，并且保存后退出。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css-3d旋转</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!--/*外层最大容器*/-->
		<div class="wrap">
	<!--	/*包裹所有元素的容器*/-->
		<div class="cube">
			<!--前面图片 -->
			<div class="out_front">
				<img src="img/1.jpg"  class="pic"/>
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="img/2.jpg"  class="pic"/>
			</div>
			<!--左图片 -->
			<div class="out_left">
				<img src="img/3.jpg"  class="pic"/>
			</div>
			<div class="out_right">
				<img src="img/4.jpg"  class="pic"/>
			</div>
			<div class="out_top">
				<img src="img/5.jpg"  class="pic"/>
			</div>
			<div class="out_bottom">
				<img src="img/6.jpg"  class="pic"/>
			</div>
			<!--小正方体 --> 
			<span class="in_front">
				<img src="img/7.jpg" class="in_pic" />
			</span>
			<span class="in_back">
			     <img src="img/8.jpg" class="in_pic" />
			</span>
			<span class="in_left">
				<img src="img/9.jpg" class="in_pic" />
			</span>
			<span class="in_right">
				<img src="img/10.jpg" class="in_pic" />
			</span>
			<span class="in_top">
				<img src="img/11.jpg" class="in_pic" />
			</span>
			<span class="in_bottom">
				<img src="img/12.jpg" class="in_pic" />
			</span>
		</div>
		</div>
	</body>
</html>

如图所示
在这里插入图片描述

3.将文件名改为index.html
在这里插入图片描述

2.创建css文件夹及其内容

1.在3D相册文件夹下新建一个文件夹，并命名为：css

在这里插入图片描述
2.进入css文件夹，并且新建一个txt文本文件

在这里插入图片描述
3.在新建的文本中插入下面代码

html{
	background: #000;
    height: 100%;	
}
/*最外层容器样式*/
.wrap{
	position: relative;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: auto;
	/*改变左右上下,图片方块移动*/
	
}
/*包裹所有容器样式*/
.cube{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 20s infinite;
	/*匀速*/
	animation-timing-function: linear;
}
@-webkit-keyframes rotate{
	from{transform: rotateX(0deg) rotateY(0deg);}
	to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all .4s;
}
/*定义所有图片样式*/
.pic{
	width: 200px;
	height: 200px;
}
.cube .out_front{
	transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
	transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
	transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
	transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
	transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
	transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic{
	width: 100px;
	height: 100px;
}
.cube .in_front{
	transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
	transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
	transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
	transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
	transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
	transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
	transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
	transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
	transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
	transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
	transform: rotateX(-90deg) translateZ(200px);
}

在这里插入图片描述

4.保存文本，并退出。
5.给txt文件重新命名：index.css
在这里插入图片描述

3.在创建img文件夹及其内容

1.在 3D相册 文件夹下新建一个文件夹，并命名为：img
在这里插入图片描述
2.然后把12张照片复制到img文件夹中

命名就按下图的方式命名，照片名一定要是1.jpg 2.jpg 3.jpg 4.jpg 到 12.jpg ，不能起别的名字。1.jgp 2.jgp 3.jpg 4.jpg 等等往下类推，最多到 12.jpg 也就是最多放12张照片。

在这里插入图片描述

4.关于图片大小以及修改方法

1.用win10系统自带的  画图3D打开照片

在这里插入图片描述

2.右击图片，选择照片中框出来的工具打开照片，工具是win10系统自带的。
在这里插入图片描述
3.打开照片以后点击左上角的剪裁，得到下图所示界面。

在这里插入图片描述
4.紧接着选择右侧1：1的选项，图片中会出现一个正方形的选框，同时右侧的高度和宽度的像素点已经一样了。
在这里插入图片描述
5.燃油用鼠标拖动选框向上或者向下移动，得到想要的部分。
在这里插入图片描述
6.照片的像素点没有具体要求，高度和宽度相等就好。
7.最后点击完成、保存，就可以得到想要的尺寸了。

总结

双击运行index.html文件，在浏览器中就会打开，得到3D旋转的相册。
在这里插入图片描述

在这里插入图片描述

如果觉得好，欢迎点赞+评论+收藏。

下载方法

链接：https://pan.baidu.com/s/1Nl4iqn5EwRRDwYYel6SzWA
提取码：sx97

seven_stars_
关注
  • 49
    点赞
  • 踩
  • 248
    收藏
    觉得还不错? 一键收藏
  • 30
    评论
Shy-3D立体动态相册实现代码（源代码）
05-20
纯CSS实现鼠标经过3D立体动态展示图片特效代码 @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(img/01.png) no-repeat 0 0; -webkit-transform:translateZ(50px); } .minbox li:nth-child(2){ background: url(img/02.png) no-repeat 0 0; -webkit-transform:rotateX(180deg) translateZ(50px); } .minbox li:nth-child(3){ background: url(img/03.png) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px); } .minbox li:nth-child(4){ background: url(img/04.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .minbox li:nth-child(5){ background: url(img/05.png) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px); } .minbox li:nth-child(6){ background: url(img/06.png) no-repeat 0 0; -webkit-transform:rotateY(90deg) translateZ(50px); } .maxbox li:nth-child(1){ background: url(img/1.png) no-repeat 0 0; -webkit-transform:translateZ(50px); } .maxbox li:nth-child(2){ background: url(img/2.png) no-repeat 0 0; -webkit-transform:translateZ(50px); } .maxbox li:nth-child(3){ background: url(img/3.png) no-repeat 0 0; -webkit-transform:rotateX(-90deg) translateZ(50px); } .maxbox li:nth-child(4){ background: url(img/4.png) no-repeat 0 0; -webkit-transform:rotateX(90deg) translateZ(50px); } .maxbox li:nth-child(5){ background: url(img/5.png) no-repeat 0 0; -webkit-transform:rotateY(-90deg) translateZ(50px); } .maxbox li:nth-child(6){ background: url(img/6.png) 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: -100px; } .box:hover ol li:nth-child(2){ -webkit-transform:rotateX(180deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .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: -100px; } .box:hover ol li:nth-child(5){ -webkit-transform:rotateY(-90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0
3D图片墙风格相册fla+xml源文件素材
04-22
在本素材中，ActionScript 3用于编写控制3D图片墙相册行为的代码，包括图片的加载、显示、旋转、缩放等动态效果。由于ActionScript 3相较于早期版本有显著的性能提升和更严谨的语法结构，使得它更适合创建复杂的应用...
HTML+CSS案例展示(CSS3D效果旋转相册)
weixin_42541725的博客
01-24 1878
CSS3D效果旋转相册
【前端领域】3D旋转超美相册（HTML+CSS）
好好读书
02-12 4401
【前端领域】3D旋转超美相册（HTML+CSS） 3D旋转相册 本文是一篇简单的前端代码，主要内容仅包含 HTML，CSS 等内容 主要为 CSS 1、HTML代码 2、CSS样式 3、插件等 4、旋转特效 5、图片 6、鼠标放置效果 7、可添加背景音乐，背景图等
HTML-网页-3D旋转相册-创意相册
最新发布
2401_84149198的博客
04-18 530
/#box p{left: 0;top: 0;bottom: 0;right: 0;
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册
在下马农的碎碎念
01-10 6171
2022最炫纪念相册 3D立体旋转相册 音乐相册 旋转相册 2023新年相册 纪念相册模板 纪念相册制作 纪念相册设计 纪念相册DIY 相册代码html 2023新年快乐 新年祝福 新年礼物 好看的HTML 旋转相册 最好的礼物
3D旋转相册html+css代码分享
m0_53602804的博客
04-16 8893
html+css小练手
(樱花飞舞背景)抖音同款程序员3d旋转正方体相册，送给你最爱的TA吧
灵舒的博客
07-22 3572
首先建立一个文件夹，然后我们的操作在里面完成，十分简单 1.建立一个css文件夹，里面建立一个名为index.css的文件， 注意：记得修改后缀名的时候，要把后缀名显示出来，文件扩展名要打勾哦 代码如下`html{ background: #000; height: 100%; } /最外层容器样式/ .wrap{ position: relative; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; hei
基于Android的智能手机图片管理App开发(源码+演示视频).rar
06-29
基于Android的智能手机图片管理App开发(源码+演示视频).rar 【项目技术】 android+java 【实现功能】 1.用户注册和登陆：用户可以通过注册获取权限并登陆App； 2.分类相册：可以自定义添加编辑相册名称，用于照片...
FLASH 相册源码
11-10
【FLASH相册源码】是一种基于Adobe Flash技术的多媒体应用，用于展示图片并提供互动体验。这个源码采用ActionScript 3（AS3）编写，是Flash编程语言的一个版本，它提供了更强大的性能和更丰富的功能。AS3是面向对象...
用html+CSS实现的3D旋转相册（表白代码）
06-03
使用html和css知识实现的一个网页立体相册，可以左右上下多角度旋转，可以添加背景照片，文件夹里面的照片可以换成自己想换的，不过照片的名字要和原来的对应上，即使没有前端的知识，也能简单操作。
图片相册的展示 (能旋转)
01-16
图片相册的展示 (能旋转)　　　图片浏览
会旋转的3D Flash图片效果源文件
03-19
源文件通常包含编程代码、素材资源和项目设置等，开发者可以对这些文件进行修改和学习，以便自定义或创建类似的3D旋转效果。 【标签】：“会旋转的3D Flash图片效果源文件”标签再次明确了这个文件的核心内容，即...
婚纱照电子相册模板
08-25
2. **动画效果**：为了使相册更具动态感，设计师会在页面间添加过渡动画，如淡入淡出、滑动、旋转等。这些效果可以通过Adobe After Effects或类似工具实现。 3. **多媒体集成**：电子相册可以包含音频和视频元素。...
婚纱电子相册模板
08-25
2. **动画效果**：为了让相册动起来，需要添加过渡效果、淡入淡出、旋转、缩放等动画。这些效果可以通过Adobe After Effects或类似的视频编辑软件实现，使相册在播放时更富动态感。 3. **多媒体集成**：电子相册...
HTML+CSS实现3D旋转相册
qq_44723773的博客
10-29 7045
介绍 在前几篇博客中介绍了transform的属性，那么再经过几天的学习之后，现在对transform的属性有了更多了理解，同时也通过自己的想法，完成了下面的作品： 实现一个3D的旋转相册 代码 废话不多说，直接上代码吧~ <!-- * @Author: OriginalCoder * @Date: 2020-10-29 12:39:14 * @version: * @LastEditTime: 2020-10-29 13:59:12 * @LastEditors: OriginalCo
JavaScript实现3D旋转相册
算法与编程之美
02-09 3808
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述3D旋转相册是通过perspective属性的盒...
js实现3D旋转相册
热门推荐
wangzhneg123的博客
03-15 1万+
效果展示： 使用图片： 。。。。剩余自己随意 图片大小为133*200 代码展示： &lt;!DOCTYPE html&gt; &lt;!--设置图片的拖拽事件 不可用--&gt; &lt;html lang="en" ondragstart="return false"&gt; &lt;head&gt; &lt;meta charset="UTF-8"
erp源码+小程序源码+app源码+h5
06-05
ERP源码指的是企业资源计划软件的源代码。通常，使用ERP能够提高企业内部的业务运作效率，优化各项业务流程，降低成本和风险。ERP源码可以根据企业的需求进行个性化定制，满足不同企业的需求。 小程序源码指的是微信小程序的源代码。微信小程序是一种轻量级应用，可以在微信内直接使用，无需下载和安装。小程序源码可以根据需求进行定制，为企业提供更好的用户体验和服务。 App源码指的是移动应用程序的源代码。移动应用程序是一种在移动设备上运行的软件，可以为移动用户提供方便的服务和信息。App源码可以根据企业需要进行个性化定制，提高企业的服务水平和用户满意度。 H5指的是HTML5技术标准，是一种用于Web页面创建和设计的技术。H5可用于创建网页、响应式设计和移动应用。H5技术可以用于企业宣传、产品推广和网上销售等方面，提高企业的市场营销效果和业务流程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 30
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值