代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>3D立体照片墙</title>
<style>
/*
transform顺序:先写rotate再写tanslate
图片相差角度不一样，两个之间的距离也不一样
*/
*{
margin: 0;
padding: 0;
}
.picwall{
margin: 100px 300px;
transform-style: preserve-3d;/**/
transform-origin: 140px 200px;
animation: pics 10s linear infinite;
}
.d0{
width: 280px;
height: 400px;
position: absolute;
float: left;
}
.pic11{
transform: rotateY(60deg) translateZ(260px);
}
.pic12{
transform: rotateY(120deg) translateZ(260px);
}
.pic21{
transform: rotateY(180deg) translateZ(260px);
}
.pic22{
transform: rotateY(240deg) translateZ(260px);
}
.pic31{
transform: rotateY(300deg) translateZ(260px);
}
.pic32{
transform: rotateY(360deg) translateZ(260px);
}
@keyframes pics {
0%{
transform: rotateY(0deg) ;
/*rotate(0deg)*/
}
100%{
transform: rotateY(360deg) ;
/*rotate(360deg)*/
}
} </style>
</head>
<body>
<div class="picwall">
<img class="pic11 d0" src="../imgs/xch1.jpg" alt=""/>
<img class="pic12 d0" src="../imgs/xch2.jpg" alt=""/>
<img class="pic21 d0" src="../imgs/xch3.jpg" alt=""/>
<img class="pic22 d0" src="../imgs/xch4.jpg" alt=""/>
<img class="pic31 d0" src="../imgs/xch5.jpg" alt=""/>
<img class="pic32 d0" src="../imgs/xch6.jpg" alt=""/>
</div>
</body>
</html>
