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部分用蓝色标记出来）：
纯CSS实现3D照片墙
原文地址：https://www.cnblogs.com/web12/p/10023315.html