利用css制作3D照片墙效果

下面是制作3D照片墙效果的完整攻略：

1. 概述

制作3D照片墙效果需要使用CSS3的transform属性来控制元素的位置和旋转角度，同时还需要使用伪元素和z-index属性来实现层叠效果。总体实现过程包括以下几个步骤：

1. 创建一个包含图片的HTML结构，每个图片需要设置一个固定大小的容器和一个img标签。

2. 对图片容器设置透视距离，以及一些基础的样式，比如宽高、边框等。

3. 对每个图片容器使用CSS3的transform属性，分别设置它们的位置和旋转角度。

4. 为每个图片容器创建一个伪元素，设置其内容为空格、位置和大小与容器相同，并使用z-index属性将伪元素置于容器下层。

5. 对伪元素设置背景图，使其整体与容器和图片呈现3D立体效果。

2. 示例说明

下面举两个实际的例子来演示如何制作3D照片墙效果。

示例一

首先来看一个比较简单的例子。

<div class="picWall">
  <div class="pic"><img src="img/1.jpg"></div>
  <div class="pic"><img src="img/2.jpg"></div>
  <div class="pic"><img src="img/3.jpg"></div>
  <div class="pic"><img src="img/4.jpg"></div>
</div>

.picWall {
  perspective: 1000px;
}

.pic {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
  transform-style: preserve-3d;
  float: left;
  margin: 20px;
  transition: all 0.5s ease-in-out;
}

.pic:hover {
  transform: rotateY(45deg);
  box-shadow: 0 0 10px #ccc;
}

.pic:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("img/cardboard.jpg");
  background-size: cover;
  transform: translateZ(-1px);
  opacity: 0.5;
  z-index: -1;
}

在这个例子中，首先对外层容器picWall设置透视距离，同时对内部的每个图片容器pic设置宽高、边框等样式。然后分别对每个图片容器设置旋转角度，并在其上创建一个伪元素，对伪元素设置背景图以呈现3D立体效果。

在图片容器上增加hover事件，设置旋转角度并增加阴影效果，实现了鼠标悬停时的效果。

示例二

这里再来一个稍微复杂一些的例子，其中涉及到使用JavaScript动态生成HTML代码。

<div class="picWall">
  <div class="pic" data-index="1"><img src="img/1.jpg"></div>
  <div class="pic" data-index="2"><img src="img/2.jpg"></div>
  <div class="pic" data-index="3"><img src="img/3.jpg"></div>
  <div class="pic" data-index="4"><img src="img/4.jpg"></div>
  <div class="pic" data-index="5"><img src="img/5.jpg"></div>
  <div class="pic" data-index="6"><img src="img/6.jpg"></div>
  <div class="pic" data-index="7"><img src="img/7.jpg"></div>
  <div class="pic" data-index="8"><img src="img/8.jpg"></div>
  <div class="pic" data-index="9"><img src="img/9.jpg"></div>
  <div class="pic" data-index="10"><img src="img/10.jpg"></div>
</div>

<script>
var picWall = document.querySelector('.picWall');
for (var i = 11; i <= 20; i++) {
  var pic = document.createElement('div');
  pic.className = 'pic';
  pic.dataset.index = i;
  var img = document.createElement('img');
  img.src = 'img/' + i + '.jpg';
  pic.appendChild(img);
  picWall.appendChild(pic);
}
</script>

.picWall {
  perspective: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pic {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
  transform-style: preserve-3d;
  margin: 20px;
  transition: all 0.5s ease-in-out;
}

.pic:hover {
  transform: rotateY(60deg) translateZ(50px);
  box-shadow: 0 0 10px #ccc;
}

.pic:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("img/wall.jpg");
  background-size: cover;
  transform: translateZ(-1px);
  opacity: 0.5;
  z-index: -1;
}

.pic:nth-child(6n+1):after {
  background-image: url("img/left.jpg");
}

.pic:nth-child(6n+2):after {
  background-image: url("img/right.jpg");
}

.pic:nth-child(6n+3):after {
  background-image: url("img/top.jpg");
}

.pic:nth-child(6n+4):after {
  background-image: url("img/bottom.jpg");
}

.pic:nth-child(6n+5):after {
  background-image: url("img/back.jpg");
}

.pic:nth-child(6n+6):after {
  background-image: url("img/front.jpg");
}

在这个例子中，首先对外层容器picWall设置透视距离，并使用Flex布局来实现图片的自动分行对齐。然后使用JavaScript动态生成HTML代码，并将每个图片的索引写入自定义的data-index属性中。

接下来分别对每个图片容器设置旋转角度，并在其上创建一个伪元素，对伪元素设置背景图以呈现3D立体效果。不同之处在于，在这个例子中我们针对不同的图片容器做了不同的背景图处理，使其呈现出更复杂的3D立体效果。

在图片容器上增加hover事件，设置旋转角度并增加阴影效果，实现了鼠标悬停时的效果。

3. 总结

以上就是制作3D照片墙效果的完整攻略。如果你需要更复杂的立体效果，可以根据实际需求添加更多的CSS属性和伪元素。希望这个攻略对你有所帮助！