效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人相册</title>
<style>
body{
margin: 0;
padding: 0;
text-align: center;
background: url("image/bg.jpg");
background-size:cover;
}
#top{
height: 50px;
background-color: #9297be;
}
#l{
padding-top: 15px;
padding-left: 30px;
float: left;
}
#r{
padding-right: 30px;
padding-top: 15px;
float: right;
}
a:link,:visited{
text-decoration: none;
color:#000;
}
a:hover{
color:#ef6c00;
}
div.photo {
width: 250px;
height: 250px;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
animation: run 15s linear infinite;
}
img {
width: 250px;
position: absolute;
backface-visibility: visible;
/* 默认值为visible，即能看见3d画面的背面，hidden看不见 */
}
@keyframes run {
0% {
transform: translate(-50%, -50%) rotateY(0deg);
}
100% {
transform: translate(-50%, -50%) rotateY(360deg);
}
}
img:nth-of-type(1) {
transform: rotateY(45deg) translatez(450px);
}
img:nth-of-type(2) {
transform: rotateY(90deg) translatez(450px);
}
img:nth-of-type(3) {
transform: rotateY(135deg) translatez(450px);
}
img:nth-of-type(4) {
transform: rotateY(180deg) translatez(450px);
}
img:nth-of-type(5) {
transform: rotateY(225deg) translatez(450px);
}
img:nth-of-type(6) {
transform: rotateY(270deg) translatez(450px);
}
img:nth-of-type(7) {
transform: rotateY(315deg) translatez(450px);
}
img:nth-of-type(8) {
transform: rotateY(360deg) translatez(450px);
}
</style>
</head>
<body>
<div id="top">
<div id="l">
欢迎XXX登录！
</div>
<div id="r">
<a href="#"><b>个人信息</b></a>
<a href="登录.html"><b>退出</b></a>
</div>
</div>
<div class="photo">
<img src="image/1.jpg">
<img src="image/2.jpg">
<img src="image/3.jpg">
<img src="image/4.jpg">
<img src="image/5.jpg">
<img src="image/6.jpg">
<img src="image/7.jpg">
<img src="image/8.jpg">
</div>
<script>
document.getElementById("l").innerHTML="欢迎"+localStorage.getItem("username")+"登录！";
</script>
</body>
</html>