照片魔方，学废了这个，有男朋友女朋友的，都会感觉你狠爱他

本文链接：https://blog.csdn.net/qq_46964039/article/details/109333407

照片魔方，学废了这个，有男朋友女朋友的，都会感觉你狠爱他

第一步
第二步
第三步
第四步
第五步
第六步

第一步

首先我们要有一个前台的软件，我的是hbuilder

第二步

找七张照片（你对象的，合照最好），有一张是背景图片，照片怎么放，看你们的心情
在这里插入图片描述

第三步

这一步就是写代码的时候到了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		
		/*设置自定义动画*/
		@keyframes a{
			from{transform: rotateX(0deg) rotateY(0deg);}
			to{transform: rotateX(360deg) rotateY(360deg);}
		}
		
		/*设置网页的背景图片*/
		body{
			background: url(img/pp.png);
			background-size: 20%;
		}
		/*设置main尺寸和背景颜色*/
		.main{
			width: 200px;
			height: 200px;
			margin: 300px auto;
			/*设置盒子支持3D效果*/
			transform-style: preserve-3d;
			/*设置盒子默认的动画*/
			transform: rotateX(-30deg) rotateY(-80deg);
			
			/*使用自定义动画*/
			animation: a 10s linear infinite;
			
		}
		
		/*给大盒子中的所有的div设置尺寸*/
		.big div{
			width: 200px;
			height: 200px;
			position: absolute;
		}
		/*给大盒子中的所有的图片设置尺寸*/
		.big img{
			width: 200px;
			height: 200px;
		}
		/*设置前面盒子的位置*/
		.big .qian{
			transform: rotateY(90deg) translateZ(100px);
		}
		/*设置后面盒子的位置*/
		.big .hou{
			transform: rotateY(90deg) translateZ(-100px);
		}
		/*设置左边盒子的位置*/
		.big .zuo{
			transform: translateZ(100px);
		}
		/*设置右边盒子的位置*/
		.big .you{
			transform: translateZ(-100px);
		}
		/*设置上面盒子的位置*/
		.big .shang{
			transform: rotateX(90deg) translateZ(100px);
		}
		/*设置下面盒子的位置*/
		.big .xia{
			transform: rotateX(90deg) translateZ(-100px);
		}
		
		/*设置鼠标悬停，盒子变大*/
		
		/*设置前面盒子的位置*/
		.big:hover .qian{
			transform: rotateY(90deg) translateZ(200px);
		}
		/*设置后面盒子的位置*/
		.big:hover .hou{
			transform: rotateY(90deg) translateZ(-200px);
		}
		/*设置左边盒子的位置*/
		.big:hover .zuo{
			transform: translateZ(200px);
		}
		/*设置右边盒子的位置*/
		.big:hover .you{
			transform: translateZ(-200px);
		}
		/*设置上面盒子的位置*/
		.big:hover .shang{
			transform: rotateX(90deg) translateZ(200px);
		}
		/*设置下面盒子的位置*/
		.big:hover .xia{
			transform: rotateX(90deg) translateZ(-200px);
		}
	</style>
	
	<script type="text/javascript">
		function playmusic(){
			bgm.src="music/孙俪 - 稳稳的幸福.mp3";
			bgm.play();
		}
	</script>
	
	
	<body onload="playmusic()">
		<audio id="bgm"></audio>
		
		<div class="main">
			<div class="big">
				<div class="qian">
					<img src="img/hmh.jpg"/>
				</div>
				<div class="hou">
					<img src="img/zyl.jpg"/>
				</div>
				<div class="zuo">
					<img src="img/wyb.jpg"/>
				</div>
				<div class="you">
					<img src="img/wl.jpg"/>
				</div>
				<div class="shang">
					<img src="img/xz.jpg"/>
				</div>
				<div class="xia">
					<img src="img/pcl.jpg"/>
				</div>
			</div>
		</div>
	</body>
</html>