HTML部分：
<body> <div class="photo-wrap"> <!-- 舞台 --> <div class="container"> <!-- 容器 --> <div class="img">我是中心</div> <div class="img img01"><img src="images/blog1.jpg" alt=""></div> <div class="img img02"><img src="images/blog2.jpg" alt=""></div> <div class="img img03"><img src="images/blog3.jpg" alt=""></div> <div class="img img04"><img src="images/blog4.jpg" alt=""></div> <div class="img img05"><img src="images/blog1.jpg" alt=""></div> <div class="img img06"><img src="images/blog2.jpg" alt=""></div> <div class="img img07"><img src="images/blog3.jpg" alt=""></div> <div class="img img08"><img src="images/blog4.jpg" alt=""></div> <div class="img img09"><img src="images/blog1.jpg" alt=""></div> </div> </div> </body>
CSS部分：
@keyframes rotate-frame { 0% { transform: rotateX(-20deg) rotateY(0deg); } 10% { transform: rotateX(-20deg) rotateY(36deg); } 20% { transform: rotateX(-20deg) rotateY(72deg); } 30% { transform: rotateX(-20deg) rotateY(108deg); } 40% { transform: rotateX(-20deg) rotateY(144deg); } 50% { transform: rotateX(-20deg) rotateY(180deg); } 60% { transform: rotateX(-20deg) rotateY(216deg); } 70% { transform: rotateX(-20deg) rotateY(252deg); } 80% { transform: rotateX(-20deg) rotateY(288deg); } 90% { transform: rotateX(-20deg) rotateY(324deg); } 100% { transform: rotateX(-20deg) rotateY(360deg); } } body { background: #f9f9f9; } img{ width:100%; height: 100%; } .photo-wrap { perspective: 800px; width: 800px; } .container { width: 800px; height: 500px; margin: 0 auto; position: relative; transform-style: preserve-3d; transform:rotateX(-10deg); animation: rotate-frame 10s linear infinite; } .img { width: 200px; height: 118px; line-height: 118px; text-align: center; position: absolute; top: 160px; left: 300px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
/*倒影的实现 第二个属性值为offset属性值定义图片和倒影影像之间的间距，第三个为给倒影增加消影效果*/ -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5)); background: pink; background:-moz-linear-gradient(top, pink, rgba(0, 0, 255, 0.5)); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ccccff), to(rgba(174, 221, 129, 0.5))); background:-o-linear-gradient(top, pink, rgba(0, 0, 255, 0.5)); transform: rotateY(0deg); } .img01 { transform: rotateY(0deg) translateZ(300px); } .img02 { transform: rotateY(40deg) translateZ(300px); } .img03 { transform: rotateY(80deg) translateZ(300px); } .img04 { transform: rotateY(120deg) translateZ(300px); } .img05 { transform: rotateY(160deg) translateZ(300px); } .img06 { transform: rotateY(200deg) translateZ(300px); } .img07 { transform: rotateY(240deg) translateZ(300px); } .img08 { transform: rotateY(280deg) translateZ(300px); } .img09 { transform: rotateY(320deg) translateZ(300px); }
效果如下（倒影的实现方法已在CSS部分用蓝色标记出来）：
