CSS 3D世界，3D 透视照片墙

Javanx

发布于 2020-06-16 16:16:03

1.4K0

发布于 2020-06-16 16:16:03

文章被收录于专栏：web秀web秀

有了前面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
}

《这15种CSS居中的方式，你都用过哪几种？》

每个元素添加阴影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);
  }
}