用HTML+CSS代码制作3D旋转相册

置顶 已于 2022-04-22 14:06:26 修改
阅读量10w+ 收藏 526
点赞数 110
分类专栏： HTML+CSS 文章标签： HTML CSS
于 2018-09-19 21:37:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43144014/article/details/82778764
版权

我的开源管理系统：Vue 3.2 + TypeScript+ Pinia + Vite2 + Element-Plus
Gitee 仓库：https://gitee.com/laramie/Geeker-Admin (欢迎 Star⭐⭐⭐)

对于很多小伙伴给我的留言问题，我详细总结一下👀👀

一、我的项目文件目录

图片全部存放在images文件夹下，你把自己需要显示的图片放在images文件夹下就可以了，一共是11张图片，一张背景图
我的图片命名为1.jpg,2.jpg……，可以自己更改图片名字，代码里也需要修改为自己的图片名字哦

在这里插入图片描述

二、index文件代码如下：（最后有百度网盘链接）

<!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("images/beijing.jpg");
				background-size: 100% 100%;
			}
			#box {
				width: 280px;
				height: 400px;
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				transform-style: preserve-3d;
				transform: rotateX(0deg) rotateY(0deg);
				animation: go 45s linear infinite;
			}
			#box img {
				width: 280px;
				height: 400px;
				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);
			}
			@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="images/1.jpg" />
			<img src="images/2.jpg" />
			<img src="images/3.jpg" />
			<img src="images/4.jpg" />
			<img src="images/5.jpg" />
			<img src="images/6.jpg" />
			<img src="images/7.jpg" />
			<img src="images/8.jpg" />
			<img src="images/9.jpg" />
			<img src="images/10.jpg" />
		</div>
	</body>
</html>

三、运行效果图：

在这里插入图片描述

四、打包运行：

有小伙伴想打包为APP的可以使用Hbuilder打包传到手机上，详细看下面教程
https://blog.csdn.net/qq_42259469/article/details/84646570?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158600294919195162559101%2522%252C%2522scm%2522%253A%252220140713.130056874…%2522%257D&request_id=158600294919195162559101&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-all_SOOPENSEARCH-1

五、百度网盘下载

链接: https://pan.baidu.com/s/1KrmOu-DVCN4kOSy_pPmvUw 提取码: yef9

Spicy Boys
关注
  • 110
    点赞
  • 踩
  • 526
    收藏
    觉得还不错? 一键收藏
  • 73
    评论
专栏目录
3d正方体旋转相册代码_1分钟制作你自己的3D旋转相册(文末有共享链接)
weixin_39860755的博客
11-27 3975
不知在凛冽的寒风里的你是否还好？ 今天我们来做一个可以稍微抚慰你冻伤的小心灵的事情，一个3D旋转相册： 第一步，你需要找12张照片并命名为1.jpg,2.jpg,...,12.jpg等，并新建一个文件夹，命名为img 第二步，新建一个txt文件，并修改扩展名为index.html，以记事本打开文档，并输入一下代码：(其中：表示的是img为图片的文件夹名称...
程序员给女朋友用HTML5制作的3D相册免费(附源码)
04-28
一个高大上的HTML5作品,是利用HTML5 canvas制作的3D图片展示。据说是程序员给自己女朋友做的。谁说程序员不懂浪漫!源码下载:CSDN下载频道或来自ypxyangyangyang的整理。...
用html+CSS实现的3D旋转相册（表白代码）
06-03
使用html和css知识实现的一个网页立体相册，可以左右上下多角度旋转，可以添加背景照片，文件夹里面的照片可以换成自己想换的，不过照片的名字要和原来的对应上，即使没有前端的知识，也能简单操作。
【Html+CSS】3D旋转相册
W2001r的博客
07-12 3624
3D旋转木马相册 & 3D盒子相册 因为代码大部分相同，就放一起了 注释一下就是另一个相册
HTML-网页-3D旋转相册-创意相册
最新发布
2401_84132723的博客
05-14 178
/#box p{left: 0;top: 0;bottom: 0;right: 0;
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册
在下马农的碎碎念
01-10 6126
2022最炫纪念相册 3D立体旋转相册 音乐相册 旋转相册 2023新年相册 纪念相册模板 纪念相册制作 纪念相册设计 纪念相册DIY 相册代码html 2023新年快乐 新年祝福 新年礼物 好看的HTML 旋转相册 最好的礼物
3D旋转相册html+css代码分享
m0_53602804的博客
04-16 8853
html+css小练手
HTML+CSS案例展示(CSS3D效果旋转相册)
weixin_42541725的博客
01-24 1847
CSS3D效果旋转相册
【超级炫酷的3D旋转相册——网页端动态显示，使用css，html等实现（附源代码）】
2301_82243539的博客
04-05 351
点击这里即可免费获取，包括答案解析。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）点击这里即可免费获取，包括答案解析。[外链图片转存中…(img-lJnbBsUP-1712255763203)]
相册图片3d旋转html代码_抖音上超火的3D立体动态相册实现代码!
weixin_39897218的博客
12-01 2619
前言：生活处处惊喜，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇文章就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。正文：一、新建一个index.html的文件，代码如下Bubbles (CodePen Circles Challenge)二、css样式的代码html,body { margin: 0; ...
html,js,css+流星3D旋转相册
04-24
情人节送女朋友的流星3D旋转相册，独属理科人的浪漫。 需要注意：1.网页html请使用Microsoft edge或者QQ浏览器打开。 2.照片在img里替换，名字为从1到10依次编号，拓展名统一使用gif，故也可以显 示gif动图。照片...
网站相册源代码
11-03
实用开发技术，jsp网站相册小实例源代码，初学jsp的源代码！
情人节程序员用HTML网页表白【3D旋转木马相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
纯css3-球形3d旋转-多图3d球形旋转
01-21
球形多图3d旋转，纯css3代码
CSS3制作酷炫的三维相册效果
09-24
在本文中，我们将深入探讨如何使用CSS3来创建一个引人入胜的三维相册效果。这个效果通过利用CSS3的3D变换和动画特性，为网页增添动态和立体感，使得用户在浏览图片时能体验到独特的视觉享受。 首先，我们需要理解...
前端学习（231）:box-reflect倒影
歌谣的博客
12-27 265
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
html结合css实现浏览器展示3D相册
qq_42077317的博客
02-20 898
这里面主要运用了css美化页面，利用旋转，图片阴影效果，加上倒影展示，配合js实现动态页面效果。2.接着我们实现WebMvcConfigurer接口，定义调用接口，返回html。最近写了一个在浏览器展示3D相册效果，通过html文件结合css实现。大家可以自己去尝试下。
html3D创意相册附源码
2401_84121723的博客
04-09 624
} else this.visible = false;return true;}return {// — load data ----load : function (data) {window.addEventListener(‘load’, function () {ge1doot.loadJS(“js/imageTransform3D.js”,init, data);}, false);}}})().load({imgdata:[// north{img:‘imgs/1.jpg’, x:-1000,
3d旋转爱心粒子代码html+css
12-04
以下是一段HTML5和CSS3制作的3D旋转爱心粒子代码，你可以将其复制到HTML文件中并在浏览器中查看效果： ```html <!DOCTYPE html> <html> <head> <title>3D旋转爱心粒子代码</title> <style> body { background-color: #000; overflow: hidden; } .heart { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; animation: rotate 10s linear infinite; } .heart .heart-piece { position: absolute; width: 100px; height: 100px; background-color: #f00; border-radius: 50%; transform-style: preserve-3d; animation: rotate 10s linear infinite; } .heart .heart-piece:before, .heart .heart-piece:after { content: ""; position: absolute; width: 100px; height: 100px; background-color: #f00; border-radius: 50%; transform-style: preserve-3d; animation: rotate 10s linear infinite; } .heart .heart-piece:before { transform: rotateY(90deg) rotateZ(45deg); } .heart .heart-piece:after { transform: rotateY(90deg) rotateZ(-45deg); } .heart .heart-piece:nth-child(1) { transform: rotateY(0deg) translateZ(50px); } .heart .heart-piece:nth-child(2) { transform: rotateY(90deg) translateZ(50px); } .heart .heart-piece:nth-child(3) { transform: rotateY(180deg) translateZ(50px); } .heart .heart-piece:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> </head> <body> <div class="heart"> <div class="heart-piece"></div> <div class="heart-piece"></div> <div class="heart-piece"></div> <div class="heart-piece"></div> </div> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值