「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」
有了前面2章内容，大家应该对CSS 3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。
今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。
结构
用一个容器div.photo，装六个面
<div class="photo">
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
</div>
复制代码容器及公共样式
.photo {
position: absolute;
width: 210px;
height: 120px;
left: 50%;
top: 50%;
margin-left: -105px;
margin-top: -60px;
transform-style: preserve-3d;
}
.photo .example {
position: absolute;
width: 210px;
height: 120px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
bottom: 0;
}
复制代码用了绝对定位position: absolute6个子元素会重叠在一起了
我们先使其整个容易元素在3D空间呈现(transform-style: preserve-3d )
定宽定高元素水平垂直居中
{
position: absolute;
width: 210px;
height: 120px;
left: 50%;
top: 50%;
margin-left: -105px; // 宽/2
margin-top: -60px; // 高/2
}
复制代码每个元素添加阴影box-shadow(学习更多CSS阴影知识，请看前面几个章节)
子元素的位置
然后用transform，改变每个子元素的在空间上的位置。
.photo .example {
...
background-color: rgba(253, 121, 168, 0.52);
}
.photo .example:nth-child(1) {
transform: rotateY(0) translateZ(280px);
}
.photo .example:nth-child(2) {
transform: rotateY(60deg) translateZ(280px);
}
.photo .example:nth-child(3) {
transform: rotateY(120deg) translateZ(280px);
}
.photo .example:nth-child(4) {
transform: rotateY(180deg) translateZ(280px);
}
.photo .example:nth-child(5) {
transform: rotateY(240deg) translateZ(280px);
}
.photo .example:nth-child(6) {
transform: rotateY(300deg) translateZ(280px);
}
复制代码之前的空间坐标图，不是很明确，请看下图，更为直观。
所以，我们这里的空间相册，只需要每个元素沿着 Y 轴的 3D 旋转，间隔rotateY(60deg)即可形成一个圆环
动画
.photo {
...
animation: rotateAn
18s
ease-in-out
infinite
2s;
}
@keyframes rotateAn {
0% {
transform: rotateY(0);
}
16.7% {
transform: rotateY(60deg);
}
33.3% {
transform: rotateY(120deg);
}
50% {
transform: rotateY(180deg);
}
66.7% {
transform: rotateY(240deg);
}
83.3% {
transform: rotateY(300deg);
}
100% {
transform: rotateY(360deg);
}
}
复制代码然整个容器绕Y轴，旋转即可
animation（动画）
语法：
animation: name duration timing-function delay iteration-count direction;
-
name（需要绑定到选择器的 keyframe 名称）
-
duration（完成动画所花费的时间，以秒或毫秒计）
-
function（动画的速度曲线）
-
delay（动画开始之前的延迟）
-
count（动画应该播放的次数）
-
direction（是否应该轮流反向播放动画）
《CSS3最容易混淆属性transition transform animation translate》
是不是感觉怪怪的，这个好像也不够立体啊
对的，下面我们添加一层div，包裹住整个容器，并添加一些样式
<div class="container">
<div class="photo">
...
</div>
</div>
复制代码.container{
position: relative;
perspective: 1500;
}
复制代码perspective 官方定义：
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective 通俗的讲：
perspective 通俗讲，就是我们看看一个物体的所处的视角，近大远小。就比如我们正对着电脑：当我无限贴近电脑屏幕的时候，电脑的屏幕就无限大；当我们站起来远离电脑的时候，电脑的屏幕就无限变小。
是不是有不同的视觉感？
换装
换上自己喜欢的图片，可以直接在每个元素下面添加img标签
<div class="container">
<div class="photo">
<div class="example">
<img src="./b1.jpg" alt="">
</div>
<div class="example">
...
</div>
...
</div>
</div>
复制代码.photo .example img{
width: 100%;
height: 100%;
object-fit: cover;
}
复制代码object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
1、 fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
2、 contain 保持原有尺寸比例。内容被缩放。
3、 cover 保持原有尺寸比例。但部分内容可能被剪切。
4、 none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。
5、 scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
object-fit: cover 是用来处理图片展现的最好方式。
然后，我们也可以不添加img标签，而去设置每个元素的背景图，同样可以实现。
结语
关注我，学习更多编程知识哦，不仅仅是前端！
小伙伴们，有问题可以评论区留言哦，欢迎大家点评。
谢谢大家一直以来的支持。