立体相册，你值得拥有巧用animation制作一个立体相册首先，添加元素再给每个面添加背景图片，即个人相片，之后利用3D

巧用animation制作一个立体相册
首先，添加元素

<body>
		<div class="rect-wrap"><!--舞台元素，设置perspective,让其子元素获得透视效果-->
			<div class="container"><!--容器，设置transform-style:perserve-3d,让其子元素在3D空间呈现-->
				<div class="top slide"></div> <!--立方体的六个面-->
				<div class="bottom slide"></div>
				<div class="left slide"></div>
				<div class="right slide"></div>
				<div class="front slide"></div>
				<div class="back slide"></div>
			</div>
		</div>
	</body>

再给每个面添加背景图片，即个人相片，之后利用3D旋转，使每个面旋转相应的角度，最终组成一个正方体

.slide{
			width: 400px;
			height: 400px;
			position: absolute;
		}
		.left{
			background: url('images/left.jpg') no-repeat;
			background-size: 400px 400px;
			transform-origin: left center;
			transform: rotateY(90deg);
		}
		.right{
			background: url('images/right.jpg') no-repeat;
			background-size: 400px 400px;
			transform-origin: right center;
			transform: rotateY(-90deg);
		}
		.top{
			background: url('images/top.jpg') no-repeat;
			background-size: 400px 400px;
		}
		.bottom{
			background: url('images/bottom.jpg') no-repeat;
			background-size: 400px 400px;
			transform: translateZ(-400px);
		}
		.front{
			background: url('images/front.jpg') no-repeat;
			background-size: 400px 400px;
			transform-origin: bottom center;
			transform: rotateX(90deg);
		}
		.back{
			background: url('images/back.jpg') no-repeat;
			background-size: 400px 400px;
			transform-origin: top center;
			transform: rotateX(-90deg)
		}

添加动画，使整个正方体空间呈3D旋转

.container{
			width: 400px;
			height: 400px;
			transform-style: preserve-3d;
			margin: 150px auto;
			animation: rotation 30s linear infinite;
		}
		@keyframes rotation{
			0%{
					transform: rotateX(0deg) rotateY(0);
				}
				10%{
					transform: rotateX(0deg) rotateY(180deg);
				}
				20%{
					transform: rotateX(-180deg) rotateY(180deg);
				}
				30%{
					transform: rotateX(-360deg) rotateY(180deg);
				}
				40%{
					transform: rotateX(-360deg) rotateY(360deg);
				}
				50%{
					transform: rotateX(-180deg) rotateY(360deg);
				}
				60%{
					transform: rotateX(90deg) rotateY(180deg);
				}
				70%{
					transform: rotateX(0deg) rotateY(180deg);
				}
				80%{
					transform: rotateX(90deg) rotateY(90deg);
				}
				90%{
					transform: rotateX(90deg) rotateY(0deg);
				}
				100%{
					transform: rotateX(0deg) rotateY(0deg);
				}
		}

最后，还可以加上一个hover效果，可以使动画暂停，看相应的照片

.container:hover{
			animation-play-state: paused;
		}