抖音旋转相册

陈奕迅雷不及掩耳之势

已于 2022-05-07 16:15:55 修改

阅读量394

点赞数 1

分类专栏： Javaweb 文章标签： html 前端

于 2022-05-07 15:54:02 首次发布

本文链接：https://blog.csdn.net/qq_53474111/article/details/124631486

版权

Javaweb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

旋转相册

看了其他博主还在讲解代码实现，我认为完全没有必要，相信来搜代码的兄弟心情很迫切，话不多说待我稍微讲解一番直接上代码。

首先要有个编译器（废话），我这里使用的是HbuliderX。
新建一个文件夹，命名为“相册”，在该文件夹中再新建一个名为“images”的文件夹用来存放照片，并新建一个HTML文件。

images文件夹中存放旋转照片以及背景图，照片。照片大小比例大致为1:1，否则播放的效果会扭曲，背景图比例2:1即可。

每张照片的命名格式如上图，照片不易太多，可根据个人情况调整。

代码如下：

<!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" />
			
			<img src="images/12.jpg" />
			
		</div>
	</body>
</html>

其中images.12.jpg为旋转相册中心的那一张

（照片自行调整）

效果如下：

最后记得把“相册”这个文件夹一起打包发给npy哦。

陈奕迅雷不及掩耳之势

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
抖音旋转相册

看了其他博主还在讲解代码实现，我认为完全没有必要，相信来搜代码的兄弟心情很迫切，话不多说直接上代码。首先要有个编译器（废话），我这里使用的是HbuliderX。新建一个文件夹，命名为“相册”，在该文件夹中再新建一个名为“images”的文件夹用来存放照片，并新建一个HTML文件。images文件夹中存放旋转照片以及背景图，照片。照片大小比例大致为1:1，否则播放的效果会扭曲，背景图比例2:1即可。每张照片...
复制链接

扫一扫