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

2020-06-16 16:16:03 浏览数 (1)

有了前面2章内容，大家应该对CSS 3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。

今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。

结构

用一个容器div.photo，装六个面

代码语言：javascript复制
<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>

容器及公共样式

代码语言：javascript复制
.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)

定宽定高元素水平垂直居中

代码语言：javascript复制
{
  position: absolute;
  width: 210px;
  height: 120px;
  left: 50%;
  top: 50%;
  margin-left: -105px; // 宽/2
  margin-top: -60px; // 高/2
}

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

每个元素添加阴影box-shadow(学习更多CSS阴影知识，请看前面几个章节)

子元素的位置

然后用transform，改变每个子元素的在空间上的位置。

代码语言：javascript复制
.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)即可形成一个圆环

动画

代码语言：javascript复制
.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;

  1. name（需要绑定到选择器的 keyframe 名称）
  2. duration（完成动画所花费的时间，以秒或毫秒计）
  3. function（动画的速度曲线）
  4. delay（动画开始之前的延迟）
  5. count（动画应该播放的次数）
  6. direction（是否应该轮流反向播放动画）

《CSS3最容易混淆属性transition transform animation translate》

是不是感觉怪怪的，这个好像也不够立体啊

对的，下面我们添加一层div，包裹住整个容器，并添加一些样式

更多精彩内容，可以点击“立即支付”，查看隐藏内容哦！

资源下载价格1元立即支付 或  升级VIP后免费升级VIP

本站资源一次收费,永久下载！发现资源失效，联系站长恢复即可！由于源码具有可复制性、可传播性，一经购买，概不退货，购买前请再三确认！本站提供相关技术支持，网站底部联系即可。时间：周一 ~ 周五 9:30-18:00。谢谢合作！

VIP用户所有收费资源免费，登录后左上角点击 昵称 ，进入用户中心充值成为VIP会员！如果您已经登录，点击这里成为尊贵VIP用户！

tcp/ip 图像处理 css 容器 费用中心

0 人点赞