3D旋转相册

亦凉 2022-12-16 13:02 146阅读 0赞

# 3D旋转相册 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70_pic_center]

## CSS部分 ##

<style> body{ 
    				margin: 0;
    				background:gray;
    			}
    			#wrap{ 
    				width: 300px;
    				height: 400px;
    				position: relative;
    				margin:100px auto;
    				/*定义 3D 元素距视图的距离*/
    				-webkit-perspective:3000px;
    				-moz-perspective: 3000px;
    				-ms-transform:perspective(3000px);
    				-ms-perspective:3000px;
    			}
    			#head{ 
    				width: 100%;
    				height: 100%;
    				position: absolute;
    				-webkit-transform-style: preserve-3d;
    				-webkit-animation: donghua 15s linear 0s infinite;
    			}
    			#head div{ 
    				position: absolute;
    				top:0;
    				left:0;
    				width: 300px;
    				height: 350px;
    				text-align: center;
    				line-height: 100px;
    			}
    			#head div:nth-child(1){ 
    				-webkit-transform: rotateY(0deg) translateZ(400px);
    				-moz-transform: rotateY(0deg) translateZ(400px);
    				-ms-transform: rotateY(0deg) translateZ(400px);
    				background: url("../img/1.jpg");
    				background-size: 100% 100%;
    				border-radius: 8px;
    				box-shadow: 0px 0px 10px #fff;
    			}
    			#head div:nth-child(2) { 
    				-webkit-transform: rotateY(36deg) translateZ(500px);
    				-moz-transform: rotateY(36deg) translateZ(500px);
    				-ms-transform: rotateY(36deg) translateZ(500px);
    				background: url("../img/2.jpg");
    				background-size: 100% 100%;
    				border-radius: 8px;
    				box-shadow: 0px 0px 10px #fff;
    			}
    			#head div:nth-child(3) { 
    			-webkit-transform: rotateY(72deg) translateZ(400px);
    			-moz-transform: rotateY(72deg) translateZ(400px);
    			-ms-transform: rotateY(72deg) translateZ(400px);
    			background: url("../img/3.jpg");
    			background-size: 100% 100%;
    			border-radius: 8px;
    			box-shadow: 0px 0px 10px #fff;
    			}
    			
    			#head div:nth-child(4) { 
    			-webkit-transform: rotateY(108deg) translateZ(500px);
    			-moz-transform: rotateY(108deg) translateZ(500px);
    			-ms-transform: rotateY(108deg) translateZ(500px);
    			background: url("../img/4.jpg");
    			background-size: 100% 100%;
    			border-radius: 8px;
    			box-shadow: 0px 0px 10px #fff;
    			}
    			
    			#head div:nth-child(5) { 
    			-webkit-transform: rotateY(144deg) translateZ(400px);
    			-moz-transform: rotateY(144deg) translateZ(400px);
    			-ms-transform: rotateY(144deg) translateZ(400px);
    			background: url("../img/5.jpg");
    			background-size: 100% 100%;
    			border-radius: 8px;
    			box-shadow: 0px 0px 10px #fff;
    			}
    			#head div:nth-child(6) { 
    			-webkit-transform: rotateY(180deg) translateZ(500px);
    			-moz-transform: rotateY(180deg) translateZ(500px);
    			-ms-transform: rotateY(180deg) translateZ(500px);
    			background: url("../img/11.jpg");
    			background-size: 100% 100%;
    			border-radius: 8px;
    			box-shadow: 0px 0px 10px #fff;
    			}
    			
    			#head div:nth-child(7) { 
    			-webkit-transform: rotateY(216deg) translateZ(400px);
    			-moz-transform: rotateY(216deg) translateZ(400px);
    			-ms-transform: rotateY(216deg) translateZ(400px);
    			background: url("../img/7.jpg");
    			background-size: 100% 100%;
    			border-radius: 8px;
    			box-shadow: 0px 0px 10px #fff;
    			}
    			
    			#head div:nth-child(8) { 
    			-webkit-transform: rotateY(252deg) translateZ(500px);
    			-moz-transform: rotateY(252deg) translateZ(500px);
    			-ms-transform: rotateY(252deg) translateZ(500px);
    			background: url("../img/12.jpg");
    			background-size: 100% 100%;
    			border-radius: 8px;
    			box-shadow: 0px 0px 10px #fff;
    			}
    			
    			#head div:nth-child(9) { 
    			-webkit-transform: rotateY(288deg) translateZ(400px);
    			-moz-transform: rotateY(288deg) translateZ(400px);
    			-ms-transform: rotateY(288deg) translateZ(400px);
    			background: url("../img/9.jpg");
    			background-size: 100% 100%;
    			border-radius: 8px;
    			box-shadow: 0px 0px 10px #fff;
    			}
    			
    			#head div:nth-child(10) { 
    			-webkit-transform: rotateY(324deg) translateZ(500px);
    			-moz-transform: rotateY(324deg) translateZ(500px);
    			-ms-transform: rotateY(324deg) translateZ(500px);
    			background: url("../img/10.jpg");
    			background-size: 100% 100%;
    			border-radius: 8px;
    			box-shadow: 0px 0px 10px #fff;
    			}
    			@-webkit-keyframes donghua { 
    			0% { 
    			transform: rotateX(5deg) rotateY(360deg);
    			}
    			
    			50% { 
    			transform: rotateX(-5deg) rotateY(180deg);
    			}
    			
    			100% { 
    			transform: rotateX(5deg) rotateY(0deg);
    			}
    			}
    			@-moz-keyframes donghua { 
    			0% { 
    			transform: rotateY(10deg) rotateY(0deg);
    			}
    			
    			50% { 
    			transform: rotateY(-10deg) rotateY(180deg);
    			}
    			
    			100% { 
    			transform: rotateY(10deg) rotateY(360deg);
    			}
    			}
    			
    			@-ms-keyframes donghua { 
    			0% { 
    			transform: rotateY(10deg) rotateY(0deg);
    			}
    			
    			50% { 
    			transform: rotateY(-10deg) rotateY(180deg);
    			}
    			
    			100% { 
    			transform: rotateY(10deg) rotateY(360deg);
    			}
    			}
    		</style>

## 添加背景音乐 ##

<audio controls="controls" autoplay="autoplay" loop=-1>
    
      <source src="你要添加的背景音乐最好是MP3格式" type="audio/mpeg" />
    
    </audio>

## html部分 ##

<body style="background-image:url(../img/bg3.jpg)">
    		<div style="margin: 0px auto; text-align: center; width: 736px;">
    			<hr />
    			<h1><face font="华文行楷">我与猪的记忆</face></h1>
    		</div>
    		<div id="wrap">
    			<div id="head">
    				<div></div>
    				<div></div>
    				<div></div>
    				<div></div>
    				<div></div>
    				<div></div>
    				<div></div>
    				<div></div>
    				<div></div>
    				<div></div>
    			</div>
    		</div>
    		<div style="margin: 0px auto; text-align: center; width: 736px;">
    			<h1><face font="华文行楷">笨笨的相册</face></h1>
    			<hr />
    		</div>
    	</body>

如果你不想看到这个进度条，那就用CSS的方法隐藏它，输入以下代码就ok。

<div style="display:none"; class="music">
    
      .......(这里填刚才那段代码。）
    
    </div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/365ef765d43b47d4ae08a10f1d041d69.png

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关【3D旋转相册效果实现】

最终效果图展示: ![在这里插入图片描述][20190929222316567.gif] HTML部分 1.首先在html中写上名为 perspective 的di

缺乏、安全感/ 2023年08月17日 16:55/ 0 赞/ 82 阅读

相关 3D立体相册

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2022年12月29日 11:28/ 0 赞/ 125 阅读

相关实现3D立体相册

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

以你之姓@/ 2022年12月25日 15:56/ 0 赞/ 174 阅读

相关【HTML5】Web前端——制作 3D 旋转魔方相册

实现效果： ![3D魔方相册][3D] 第一步：新建项目，将准备好的图片素材放在 img 文件夹中第二步：在 body 里制作图片结构，将6张图片，分别放在div

小鱼儿/ 2022年12月25日 13:50/ 0 赞/ 161 阅读

相关 3D旋转相册

3D旋转相册 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

亦凉/ 2022年12月16日 13:02/ 0 赞/ 147 阅读

相关 204.3D视差相册旋转木马

效果 (源码网盘地址在最后) ![7d3cf176f1dc8f7353e63f30b89d0a1f.gif][] 源码 index.html <!DOC

系统管理员/ 2022年09月04日 14:55/ 0 赞/ 160 阅读

相关 CSS3通过3D变换立体旋转相册

图片镇楼： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

川长思鸟来/ 2022年04月14日 02:57/ 0 赞/ 317 阅读

相关 3D旋转

在我们平时看到的网页中,有很多效果都是有3D特效的,今天就做一个简单的立方体. 效果图是这样的: ![1567645-20190528010300441-155820918

短命女/ 2021年12月23日 06:21/ 0 赞/ 343 阅读

相关 3D相册送女友

1.创建一个文件夹 ![在这里插入图片描述][20200908184851460.png_pic_center] 2.创建文件夹如下 ![在这里插入图片描述][wa

柔光的暖阳◎/ 2021年09月21日 10:46/ 0 赞/ 327 阅读

相关 css动画 3d旋转相册

思路: 重叠四个图片,然后设置行变点在中心的z轴往后的方向上,分别设置其他图片绕y轴的旋转角度,设置父容器的行变中心点和图片一样并设置透视和3d属

待我称王封你为后i/ 2021年07月25日 02:37/ 0 赞/ 452 阅读