css-3

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

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

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

然整个容器绕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用户!

(58)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注