【Web网站】3D四面视觉效果开发【教程贴】

Web讲师-李家靖 发布于 2017/11/06 14:43
查看:135|回复:1

首先,这个原理的实现需要运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 页面可谓十分博人眼球。


并且掌握原理之后制作起来也并不算废力,下面就来讲一下吧


下面进入正文:


百闻不如一见,先直观感受一下上述我所说的效果:



998203-temp-201709-06-1504708848592.jpg


那么原本的图长什么样呢?我们把距离拉远,一探究竟:


998203-temp-201709-06-1504707688274.gif


是长这样的:


998203-temp-201709-06-1504708922117.jpg


相较于第一种效果,其实所做的只是将我们的视角推进到了正方体当中,有了一种身临其景的感觉。


而合理的运用 CSS3 所提供的一些 3D 属性,很容易就能达到上述的效果。


transform-style 与 perspective


再简单复述一下,主要是运用到了两个 CSS 属性:


transform-style


要利用 CSS3 实现 3D 的效果,最主要的就是借助 transform-style 属性。


transform-style 只有两个值可以选择:

39ab662859317d20125a2072809f583e002.png

当父元素设置了 transform-style:preserve-3d 后,就可以对子元素进行 3D 变形操作了,3D 变形和 2D 变形一样可以,使用 transform 属性来设置,或者可以通过制定的函数或者通过三维矩阵来对元素变型操作:当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时,容器的后代元素便会具有 3D 效果,这样说有点抽象,也就是当前父容器设置了 preserve-3d 值后,它的子元素就可以相对于父元素所在的平面,进行 3D 变形操作。


  • 使用 translateX(length) 、translateY(length) 、 translateZ(length) 来进行 3D 位移操作,与 2D 操作一样,对元素进行位移操作,也可以合并为 translate3d(x,y,z) 这种写法;

  • 使用 scaleX() 、scaleY() 、scaleY() 来进行3D 缩放操作,也可以合并为 scale3d(number,number,number) 这种写法;

  • 使用 rotateX(angle) 、rotateY(angle) 、rotateZ(angle) 来进行 3D 旋转操作,也可以合并为 rotate3d(Xangle,Yangle,Zangle) 这种写法。


perspective

ad61d3ebc64d6f65a97c3a30ca952a9c002.png


简单来说,当元素没有设置 perspective 时,也就是当 perspective:none/0 时所有后代元素被压缩在同一个二维平面上,不存在景深的效果。perspective 为一个元素设置三维透视的距离,仅作用于元素的后代,而不是其元素本身。


而如果设置 perspective 后,将会看到三维的效果。


我们上面之所以能够在正方体外围看到正方体,以及深入正方体,都是因为 perspective 这个属性。它让我们能够选择推进视角,还是远离视角,因此便有了 3D 的感觉。

3D View页面的布局结构



为了完成这样一个效果,需要一个灵活的布局,去控制整个 3D 效果的展示。


代码如下:


998203-temp-201709-06-1504709135156.png

  • 最外层 container ,控制图形的位置及在整个页面上的布局;

  • stage 层,舞台层,从这里开始设置 3D 景深效果,添加 perspective 视距;

  • control 层,动画的控制层,通过这一层可以添加旋转动画或者在移动端的触摸动画,通过更改translateZ 属性也可以拉近拉远视角;

  • imgWrap 层,图片层,装入我们要拼接的图片,下文会提及。


图片拼接


图片拼接其实才是个技术活,需要许多的计算。



以上述 Demo 中的正方体为例子,class 为 img 的 div 块的高宽为 400px*400px。那么要利用 4 个 这样的 div 拼接成一个正方体,需要分别将 4 个 div 绕 Y 轴旋转 [90°, 180°, 270°, 360°],再 translateY(200px) 。


值得注意的是,一定是先旋转角度,再偏移距离,这个顺序很重要。


看看俯视图,也就是这个意思:


998203-temp-201709-06-1504707579510.png

这是最简单的情况了,都是直角。


效果图:998203-temp-201709-06-1504707688274.gif

控制 control 层,进入到八方体画面内:


做到这一步,只剩下最后一步,就是推进我们的视角,进入到正方体内部,产生 3D 视图的感觉。


我们通过 class 为 control 这个 div 控制这个效果,不过这里控制我们进入正方体

内部的属性不是调整修改 perspective 属性,而是调整 translateZ 属性。通过控制 translateZ 得到的画面更加真实,可以自己尝试一下分别控制 perspective 与 translateZ 得到的效果,便会有深刻的感受。


998203-temp-201709-06-1504708848592.jpg

好了,今天的网页3D效果教程就讲那么多,我是李老师,我们下次见

查看点赞情况
全部点赞
总计: --
Web讲师-李家靖于 2017-11-06 14:47 重新编辑过该贴

共有1条评论

发布新贴
招版主啦

版主

  • 杨_宇 杨_宇
  • WEB前讲师-苏少强 WEB前讲师-苏少强
  • web讲师--何广森 web讲师--何广森
  • web前端讲师-闫华伟 web前端讲师-闫华伟
  • zacharyjoke zacharyjoke
  • Web讲师-李家靖 Web讲师-李家靖

注册有礼

完善以下信息,为你推荐课程

  • 学生
  • 白领
  • 高管
  • 自由职业
  • 其他
  • 工作需要
  • 自我提升
  • 兴趣爱好
  • 创业/转型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中专
  • 专科
  • 本科
  • 硕士
  • 其他
  • 影视枪战大片特效解析
  • PS视觉惊悚课堂
  • 45天7千平方大厦变形记
  • 原画学习痛点技法全解析
  • 影视动画奇幻课堂
  • AI高端商业设计全攻略
  • UG职场生存必备指南
  • 日赚千元之新媒体行业揭秘
出现异常