抖音3D旋转相册 （源码下载）

最新推荐文章于 2024-06-25 09:46:33 发布
最新推荐文章于 2024-06-25 09:46:33 发布
阅读量2w 收藏 380
点赞数 67
分类专栏： 操作 文章标签： css js html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43541242/article/details/107400504
版权

先来看效果

模板效果
在这里插入图片描述

上面这个是模板的预览，包括下面的代码制作和代码下载都是模板，自己替换照片就好，下面的图片是我的自己的制作，需要找我单独发！

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

自己实现步骤（当然你可以下载我提供的替换一下里面的照片）

  • 页面编写.新建index.html文件，里面写如下代码！就这一页代码就行了！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D立体</title>
<style type="text/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(../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.8;
		left: -100px;
		top: -100px;
	}
	.box:hover ol li:nth-child(6){
		-webkit-transform:rotateY(90deg) translateZ(300px);
		width: 400px;
		height: 400px;
		opacity: 0.8;
		left: -100px;
		top: -100px;
	}
	@keyframes move{
		0%{
			-webkit-transform: rotateX(13deg) rotateY(0deg);
		}
		100%{
			-webkit-transform:rotateX(13deg) rotateY(360deg);
		}
	}
</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>

然后导入自己的图片，也就是将新建文件夹img放入自己的照片，注意照片命名为1-6.png和01-06.png其中1-6的大小为400*400像素01-06为100*100像素的

目录结构

在这里插入图片描述
在这里插入图片描述
主页放index.html文件，img放自己图片，然后点击页面文件夹里面的index文件就可以打开相册啦！
在这里插入图片描述
如果是自己写，结构如下：
在这里插入图片描述

完成啦，有什么问题滴滴我！

3D相册下载地址

提取码：sssa

其它一些有趣的分享，点击查看

工具兵
关注
  • 67
    点赞
  • 踩
  • 380
    收藏
    觉得还不错? 一键收藏
  • 78
    评论
专栏目录
html写3D旋转相册的原理,【源码+教程】3D旋转相册（css3+js/纯css）
weixin_35241774的博客
05-31 2264
今天在抖音刷到了一个旋转相册，挺好玩的，就试着写了一下，我只是一个菜鸟，勿喷。另外，演示站请PC端食用，移动端不能拖拽(很卡)工具：DW/Editplus等等都行、一部电脑/云电脑、有电、一堆图片由于这是写着玩的，我就没按套路搞了(不喜欢看的，源码在最下面)OK！步入正题，这里只讲代码，不讲萌新教程(重点都标出来了)新建站点：名字自取，创建img文件夹存放图片，新建HTML文件第一步：配置好景深(...
3d相册旋转
10-20
利用html和css3技术实现3d图片库的自动旋转，可以更好的浏览图片
旋转炫酷相册-快制作你喜欢源码
linxiaoming6的博客
05-02 156
简介： 第一，我们看下这个工具的目录结构 第二，放照片 制作这个炫酷相册一共需要12张图照片，内层和外层分别六张。 放照片的时候，照片命名一定要遵从以下三点 1、内层照片命名格式为01.png、02.png等等，一共六张，外层照片命名格式为1.png、2.png等，一共六张。 2、内层照片像素为100x100，外层照片像素为400x400。 如下图：（注意：图片的裁剪建议用ps，方便快捷高效） 第三、把生成的12张照片放进前面的img文件夹下，直接点击index.html就行了。 网盘下载地址： http
3d旋转相册源码
12-16
3d旋转相册源码，用纯CSS3代码写的一个小案例，难度不大
纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作
最新发布
VX_WJ88950106的博客
06-25 385
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏 看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。...
3D旋转相册.zip
10-14
网页3D旋转相册，负有代码，下载即可打开见到效果，还可以更换自己喜欢的相册进去，旋转的速度都可以调
3d旋转相册代码源码_3D旋转相册
weixin_39693101的博客
11-27 4551
最近3d相册可谓是很火，小编的朋友圈就被刷屏了。再加上后台很多小可爱留言说想要关于3d旋转相册，但是大多数人又不会编程，代码什么的敲敲打打太费劲了，考虑到这些，小编找朋友做了这个相册的代码，一共有两个奥。获取方式在文末。下面是特效展示时间：意味着什么？意味着“抬头望见北斗星”。这北斗系统的名字起的意味着什么？意味着“抬头望见北斗星”。这北斗系统的名字起的 然后是教你们怎么...
3D照片旋转代码
02-05
用微软wpf 3D helix toolkit 进行 3D照片旋转 代码。作为示例。
3D旋转相册特效源码.zip
08-03
本资源“3D旋转相册特效源码”提供了实现这一功能的编程代码，对于开发者来说是宝贵的参考资料。 首先，我们要理解3D旋转相册特效的基本原理。它基于计算机图形学中的3D变换和渲染技术，通常结合了矩阵运算、透视...
HTML动感3D旋转相册源码.rar
10-24
源码实现效果 3D照片旋转、Canvas Svg动态背景、背景音乐的播放和暂停。 相册中的背景音乐、照片、文字内容均可自定义修改，具体说明如下： 修改音乐：将想要替换的MP3文件存放到img文件夹下，将文件名保存为“love....
3D旋转相册
04-28
3D旋转相册
抖音很火的JavaScript旋转3D相册源码.zip
05-06
抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的JavaScript旋转3D相册源码，修改了尺寸版。 抖音很火的Jav
3d旋转相册.rar
04-25
很火的表白代码，用于对心爱的人表白，电子相册，当鼠标触碰时，旋转的正方体逐渐分开变大，在内部还会有一个小型的正方体
樱花雨3d魔方旋转相册
09-17
"樱花雨3D魔方旋转相册"是一个利用三维效果展示照片的互动应用。这个项目的核心在于通过HTML5、CSS3以及JavaScript等技术实现3D魔方的动态旋转和图片展示，为用户带来视觉上的独特体验。下面我们将深入探讨这个项目...
3D相册源码.rar
02-27
《3D相册源码详解》 在当今的数字时代，图像展示的形式已经从传统的二维平面进化到了三维立体空间，3D相册源码正是这种技术的体现。它结合了计算机图形学、图像处理和用户体验设计，使得用户可以以更生动、直观的...
HTML星空背景3D旋转相册源码.rar
07-26
源码使用炫酷的动态星空作为页面背景实现3D旋转相册效果，且支持背景音乐播放/暂停功能；涉及的知识点包括html弹性盒页面布局、图片元素的选择、旋转和平移操作，css3d立体属性应用、自定义关键帧动画、贝塞尔曲线...
评论 78
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值