CSS进阶:试试酷炫的3D视角

  • 时间:
  • 浏览:2
  • 来源:大发快三_快三最高邀请码_大发快三最高邀请码

写这篇文章的缘由是将会看过了或多或少页面:

https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1(移动端页面,使用模拟器观看)

运用 CSS3 完成的 3D 视角,觉得有或多或少晕3D,否则我使人置身于其中的交互体验感觉非常棒,运用在移动端制作或多或少 H5 页面可谓十分博人眼球。

否则我掌握原理就是制作起来所以必算废力,好好的研究了一番后将或多或少学习过程共享给朋友 。

下面进入正文:(或多或少 Gif 图片较大,并能 等待的图片 一会)

3D 效果示意

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

最好能点进去看看(http://codepen.io/Chokcoco/pen/mAyRGv),这里我使用了带背景色的 div 作为示例,朋友 的视角所处另4个正方体中,正方体的旋转动画让朋友 有了 3D 的感觉。

那末就是的图长那先 样呢?朋友 把距离拉远,一探究竟:

http://codepen.io/Chokcoco/pen/KgwqRd

是长就是的:

相较于第本身生活效果,觉得所做的就是将朋友 的视角推进到了正方体当中,有了本身生活身临其景的感觉。

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

制作就是另4个 3D 图形,我在就是的文章将会很全部的讲述了过程,感兴趣的能并能 戳进去看看:

【CSS3进阶】酷炫的3D旋转透视

transform-style 与 perspective

再简单复述一下,主就是运用到了另4个 CSS 属性:

transform-style

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

transform-style 必须另4个值能并能 选泽:

// 语法:  transform-style: flat|preserve-3d;  transform-style: flat; // 默认,子元素将不保留其 3D 位置  transform-style: preserve-3d; // 子元素将保留其 3D 位置。  

当父元素设置了 transform-style:preserve-3d 后,就能并能 对子元素进行 3D 变形操作了,3D 变形和 2D 变形一样能并能 ,使用 transform 属性来设置,将会能并能 通过制定的函数将会通过三维矩阵来对元素变型操作:当朋友 指定另4个容器的 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

// 语法  perspective: number|none;  

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

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

朋友 顶端之所以并能在正方体外围看过正方体,以及深入正方体内,都不 将会 perspective 或多或少属性。它让朋友 并能选泽推进视角,还是远离视角,否则我便有了 3D 的感觉。

3D View页面的布局型态

为了完成就是另4个效果,并能 另4个灵活的布局,去控制整个 3D 效果的展示。

下面是觉得比较好的本身生活土妙招:

<!-- 最外层容器,控制图形的位置及在整个页面上的布局-->  <div class="container">      <!-- 舞台层,设置 preserve-3d 与 perspective 视距  -->      <div class="stage">          <!-- 控制层,动画的控制层,通过或多或少层能并能 再加旋转动画将会触摸动画 -->          <div class="control">              <!-- 图片层,装到朋友 要拼接的图片 -->              <div class="imgWrap">                  <div class="img img1"></div>                  <div class="img img2"></div>                  <div class="img img3"></div>                  <div class="img img4"></div>              </div>          </div>      </div>  </div>  

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

stage 层,舞台层,从这里日后结速设置 3D 景深效果,再加 perspective 视距; control 层,动画的控制层,通过或多或少层能并能 再加旋转动画将会在移动端的触摸动画,通过更改translateZ 属性并能并能 拉近拉远视角; imgWrap 层,图片层,装到朋友 要拼接的图片,下文会提及。

图片拼接

图片拼接觉得才是个技术活,并能 或多或少的计算。

以上述 Demo 中的正方体为例子,class 为 img 的 div 块的高宽为 400px*400px。那末要利用 4 个 就是的 div 拼接成另4个正方体,并能 分别将 4 个 div 绕 Y 轴旋转 [90°, 1400°, 270°, 3400°],再 translateY(400px) 。

值得注意的是,一定是先旋转宽度,再偏移距离,或多或少顺序特别要。

看看俯视图,也就是或多或少意思:

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

将会是一张图并能 分割成八份,假设每张图分割出来的高宽为 400 400 , 8 张图并能 做的操作是依次绕 Y 轴旋转 [45°, 90°, 135°, 1400°, 225°, 270°, 315°, 3400°] ,偏移的距离为 translateY(482.84px) ,也就是 (400 + 400√2)。

看看俯视图:

效果图(http://codepen.io/Chokcoco/pen/WGbERo):

图片分割

顶端的示例都不 使用的带背景色的 div 块,现在朋友 选泽一张真正的图片,将其拼接成另4个柱体。

下面这张图,大小为 34400px * 4000px :

朋友 把它分割为 20 份,拼成另4个正 20 边形,当然太久一块一块切图下来,利用 background-position 就能并能 完成了。否则我分割的份数太久,最终做出来的效果越像另4个圆柱,效果也更加真实。

正 20 边形,并能 20 个 div ,假设容器是 .img-bg1 ~ .img-bg20 ,那末每块图片的宽度为 174px,依次并能 递增的宽度为 18° ,否则我朋友 并能 计算出并能 偏移的距离为 translateZ(543px)。

能并能 利用或多或少 CSS 预处里器处里这段代码,下面是 Sass 的写法:

// Sass 的写法  $imgCount : 20 !default;  @ for $i from 1 through $imgCount {  .img-bg#{$i}{  background-position:($i * -174px + 174px) 0;  transform: rotateY($i * 18deg) translateZ(543px);  }  }  

看看效果: Demo(http://sbco.cc/demo/3dview/html/3dView2.html)

能并能 看过,图中近视为另4个圆柱形,不过有或多或少小问題:

选泽的图片并能 是左右首尾相连的的,不然圆柱结合处会有明显的不协调,这就要求要使用或多或少土妙招制作 H5 页面的就是,美术出的设计图并能 左右相连无违和感。 另外或多或少就是分割的块术,图片分割太久块,越近视为为另4个圆柱,效果更佳。

控制 control 层,进入到圆柱画面内

做到或多或少步,只剩下最后一步,就是推进朋友 的视角,进入到圆柱内内外部,产生 3D 视图的感觉。

朋友 通过 class 为 control 或多或少 div 控制或多或少效果,不过这里控制朋友 进入圆柱

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

最后的效果: Demo(http://sbco.cc/demo/3dview/html/index.html),将会是移动端效果,打开模拟器观看更佳

整个效果图太久,只截取了累积制作成 GIF:

还有另4个小问題,那就是进入到圆柱内内外部就是,整个图片都反了过来,所以朋友 将会并能 利用PS将原图进行一次左右翻转,就是进入内内外部就是,看过的就是原图效果。

至此,整个页面就算完工了,接下来的就是再加或多或少 touch 事件,增添或多或少细节。将会写的过程中遗漏了或多或少细节,有那先 比较慢一下理解过来的地方能并能 在评论留言。

本文示例 Demo 已上传在我的 Github 上:

Css33DView(https://github.com/chokcoco/Css33DView)

点赞 0