摘要:运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 页面可谓十分博人眼球。并且掌握原理之后制作起来也并不算废力,好好的研究了一番后将一些学习过程共享给大家。

写这篇文章的缘由是因为看到了这个页面:

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

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

并且掌握原理之后制作起来也并不算废力,好好的研究了一番后将一些学习过程共享给大家。

下面进入正文:(一些 Gif 图片较大,需要等待一会)

3D 效果示意

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

[wximg]http://mmbiz.qpic.cn/mmbiz_gif/zPh0erYjkib0GLlBqUabgJqS2jWe9zuLoT6Uwnoe3X9X5oF0OojRntnMVBeqwx75l7IGqODnGQyOXn17y2LHo0Q/0?wx_fmt=gif[/wximg]

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

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

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

[wximg]http://mmbiz.qpic.cn/mmbiz_gif/zPh0erYjkib0GLlBqUabgJqS2jWe9zuLoLkGHp0ZicKHficibQ9ia7RFrqicyYujQBaiarQIoJwbSHZhlUiaTf0EMXMYqA/0?wx_fmt=gif[/wximg]

是长这样的:

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib0GLlBqUabgJqS2jWe9zuLoU3xOS36VDYib2Jz6S0UgpTumwPrybHAXAicoicEDPYPGibzFiagyCoIMssQ/0?wx_fmt=png[/wximg]

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

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

看看俯视图:

[wximg]http://mmbiz.qpic.cn/mmbiz_gif/zPh0erYjkib0GLlBqUabgJqS2jWe9zuLofpS0qhUHx2taI64yxYibh9oUoxicKxCwsC4ticVtTNZztcrzEorat9AsQ/0?wx_fmt=gif[/wximg]

图片分割

上面的示例都是使用的带背景色的 div 块,现在我们选取一张真正的图片,将其拼接成一个柱体。

下面这张图,大小为 3480px * 2000px :

[wximg]http://mmbiz.qpic.cn/mmbiz_gif/zPh0erYjkib0GLlBqUabgJqS2jWe9zuLopRF3uzlibHnDIssUfMrhGlDibbOoEnKGeK8nNjZibyX1eBXnl0ibYok0Mg/0?wx_fmt=gif[/wximg]

可以看到,图中近视为一个圆柱形,不过有一些小问题:

  • 选取的图片必须是左右首尾相连的的,不然圆柱结合处会有明显的不协调,这就要求要使用这种方式制作 H5 页面的时候,美术出的设计图必须左右相连无违和感。
  • 另外一点就是分割的块术,图片分割越多块,越近视为为一个圆柱,效果更佳。

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

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

我们通过 class 为 control 这个 div 控制这个效果,不过这里控制我们进入圆柱

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

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

整个效果图太大,只截取了部分制作成 GIF:

[wximg]http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib0lZCEKibSLcyLMVa3iaNzhWkSPnEBk28r5AAcL4fS03LQn1RWA5M58d7kvysRCibKpHibjs1szyRmnOQ/640?wx_fmt=png[/wximg]

还有一个小问题,那就是进入到圆柱内部之后,整个图片都反了过来,所以我们可能需要利用PS将原图进行一次左右翻转,这样进入内部之后,看到的就是原图效果。

至此,整个页面就算完工了,接下来的就是添加一些 touch 事件,增添一些细节。可能写的过程中遗漏了一些细节,有什么很难一下理解过来的地方可以在评论留言。

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

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