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

手打代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;&lt;meta charset="UTF-8"&gt;&lt;

Spicy Boys

133429人浏览 · 2018-09-19 21:37:53

Spicy Boys · 2018-09-19 21:37:53 发布

我的开源管理系统：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

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

vue前端自动生成编号或者订单单号（日期+随机数）

created () {// 调用获取当前日期的方法加四位随机数赋值表单中的项目编号this.form.number = this.getProjectNum() + Math.floor(Math.random() * 10000)// 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了},methods: {// 获取当前日期的方法getProjectNum (