3D相册的制作

定位
必须有定位，left和top才会生效
1.相对定位：元素相对于它起点位置进行移动，参照物是它原来的位置
postion:relative
left:100px;
top:100px;
2.固定定位：
将某个元素固定在浏览器的某个位置，固定定位的位置是相对于浏览器的
固定在可视化范围内，距离上边缘和左边缘
postion:fixed;
left:100px;
top:100px;
3.绝对定位：
绝对定位的参照物是父元素，但前提是父元素有定位，如果父元素没有定位则一直往上找，直到找到有定位的祖先元素，如果没有找到，则参照物是浏览器窗口.
postiton:absolute;
left:100px;
top:100px;

盒子模型
https://www.cnblogs.com/smyhvae/p/7256371.html
属性：weight，height,padding,border,margin
weight，height:内容的宽度和高度
padding:内边距
border:边框
margin:外边距

.hezi{
weight:100px;
height:100px;
border:5px solid red;(边框像素为5px，实线，红色)
padding:5px;
margin:10px;
}
注：margin是两个元素之间的距离
浮动：可以使两个元素在一列上（不写浮动默认的实在一列上）
float：left;

制作一个3D旋转相册
1.选十张图片
2.建一个div（盒子）来装10张图片
3.设置盒子的属性
此步骤需要注意的是默认的图片会在屏幕的最左边依次显示，要想使图片在中间显示有个固定的技巧：
postion:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
4.统一图片的大小：后代选择器
.box img{
width;100px;
height:100px;
}
5.完成上述步骤后图片是从上至下依次显示出来的，我们需要把图片叠在一起：
postion:absolute;
.box img{
postion:absolute;（将图片叠在一起）
width;100px;
height:100px;
}
6.增加一个3D效果：
transform-style: preserve-3d;
7.将图片扯开形成一个360°的圆:子元素选择器
/子元素选择器/
.box img:nth-child(1){
/开始翻转/
transform: rotateY(0deg) translateZ(280px);/translateZ；将图片撑开/
}
.box img:nth-child(2){
transform: rotateY(36deg) translateZ(280px);

		}
		.box img:nth-child(3){
			transform: rotateY(72deg)  translateZ(280px);
		}
			.box img:nth-child(4){
			transform: rotateY(108deg)  translateZ(280px);
		}
		
		.box img:nth-child(5){
			transform: rotateY(144deg)  translateZ(280px);
		}
		.box img:nth-child(6){
			transform: rotateY(180deg)  translateZ(280px);
		}
		.box img:nth-child(7){
			transform: rotateY(216deg)  translateZ(280px);
		}
		.box img:nth-child(8){
			transform: rotateY(252deg)  translateZ(280px);
		}
		.box img:nth-child(9){
			transform: rotateY(288deg)  translateZ(280px);
		}
		.box img:nth-child(10){
			transform: rotateY(324deg)  translateZ(280px);
		}

8.图片全部撑开之后开始让它动起来：添加动画
//动画的名字，动画的时间，动画是否匀速，动画是否重复运行
animation: dong 7s linear infinite;
@keyframes dong{
0%{
transform: rotateX(20deg) rotateY(0deg) scale(1);/scale改变物体大小/

			}
			25%{
				transform: rotateX(0deg) rotateY(90deg);
			}
			50%{
				transform: rotateX(-20deg) rotateY(180deg);
			}
			75%{
				transform: rotateX(0deg) rotateY(270deg);
			}
			100%{
				transform: rotateX(20deg) rotateY(360deg) scale(2);
			}
		}

9.加背景图:
body{
/设置背景图片全都显示/
background-image: url(img/bg2.jpg);
background-size: 100% 100%;
background-attachment: fixed;
}
#gou{
position: absolute;
bottom: 0;
right: 0;
}
10.加背景音乐：
audio autoplay=“autoplay”
source src=“img/1111.mp3”
audio