代码如下：
<!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>