禁止转载,禁止转载

作者: 前端  发布:2019-11-03

BOOM:一款有趣的Javascript动画效果

2016/04/06 · CSS, JavaScript · 3 评论 · boom, boomJS, 动画

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下。

缘起

前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮炫的,效果图:

9159.com 1

我就寻思着,在浏览器环境下,用 Javascript 怎么实现呢?

在浓烈的好奇心驱使下,最终利用 Javascript 和 CSS3 完成了模仿上面的效果,通过调用方法,可以将页面上的图片一键爆炸,我给它起了个 boomJS 的名字,贴两张效果图:

9159.com 2    9159.com 3

实现

我感觉效果还是可以的,因为没有使用 canvas ,所以无法取到图片上每个像素的颜色值。使用了一些比较讨(sha)巧(bi)的方法,下面简单讲讲如何实现的:

1、构造新图容器,隐藏原图

原本的图是 标签的图,一张整图,最终的效果当然不是在原图上 boom ,看上去连贯的动画本质上只是一个障眼法,利用 Javascript 做了一些巧妙的变换,所以第一步所做的就是取到原图的高宽及相对浏览器视窗的定位,再创建一个新的容器附着在原图之上,然后隐藏原图。

这个方法里面我主要用到了 getBoundingClientRect 这个方法,该方法返回元素的大小及其相对于视口的位置,完美满足我的需要。

嗯,这一步做了什么呢?简单的如下所示:

9159.com 4

 

2、生成一张张是碎裂小图

最后效果是图片 boom 一下裂开,所以第二步要做的就是模拟出一小块一小块小图,这里每一个小块就是一个新的 div ,然后利用图片的定位 background-position 将其定位到合适的位置,嘿,看看效果:

9159.com 5

可以看到,这里分割成了很多个小块,每个小块其实是一个 div 然后,这些小块被添加到我们上一步中设置的容器当中,然后利用原图设置 div 的背景图,所有 div 利用的都是原图一张背景图,接着图片定位就可以完成这样一个效果,说起来很简单,但是中间经历了很多计算,如何分割图片,图片的 width 与 height 比(是横图还是竖图),每个小块 div 的定位及小 div 背景图的定位,具体的可以到这里看看:boomJS。

最后为了好看,设置了圆角,但是这样爆炸的话,感觉不够真实,图片一块一块的清晰可辨。所以利用缩放 scale ,随机让每个小块放大或者缩小,再看看缩放后的效果:

9159.com 6

嗯,模糊了很多,效果近一步增强,这样爆开来比较真实。

 

3、boom 爆炸!

嗯,到了鸡冻人心的最后一步,要做的就是给每一个 div 小块设置运动轨迹,然后同时爆开。

过程比较繁琐,需要先算出图片的中心点,然后每个 div 块点以中心为基准点向外做直线运动,不得不说,做这个我还特意恶补了一下高中的几何知识(囧)。为了效果更加真实,每个 div 块运动的直线距离添加一个正负值恰当的随机数,那么就可以达到有的块炸的比较远,有的块炸的比较近。利用未缩放的小块图片做一下大概的示意图:

9159.com 7

最后在炸裂的瞬间,让每个小块渐变消失,就可以完成上面 Gif 所示的效果了。

总结一下,其实过程当中还有很多细节没有提及,比较重要的是动画触发的时序控制,因为最近在研读 jQuery 源码,就简单的利用了 jQuery 的队列来实现控制时序。

提到了就安利一下,我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下。jQuery v1.10.2 源码注解。

然后本文没有贴代码,这个动画效果完整的代码在我的 github 上,有兴趣也可以围观一下:boomJS。

本文较短,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有帮助,点个赞,写文章不容易。

打赏支持我写出更多好文章,谢谢!

打赏作者

实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下。

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

2016/04/22 · CSS · 5 评论 · CSS3, 动画

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣。

最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的 CSS3 动画效果。

先上 demo ,没有将精力放在兼容上,请用 chrome 打开。

本文完整的代码,以及更多的 CSS3 效果,在我 github 上可以看到,也希望大家可以点个 star。

嗯,可能有些人打不开 demo 或者页面乱了,贴几张效果图:(图片有点大,耐心等待一会)

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

2016/09/08 · CSS · 1 评论 · 3D, CSS

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

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

戳我看看(移动端页面,使用模拟器观看)

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

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

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

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

9159.com 8 9159.com 9

5 赞 12 收藏 3 评论

 

立方体 3D 旋转

9159.com 10

3D 效果示意

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

See the Pen 3DView by Chokcoco (@Chokcoco) on CodePen.

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

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

See the Pen 3DView2 by Chokcoco (@Chokcoco) on CodePen.

是长这样的:

9159.com 11

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

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

制作这样一个 3D 图形,我在之前的文章已经很详细的讲述了过程,感兴趣的可以戳进去看看:

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

关于作者:chokcoco

9159.com 12

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

9159.com 13

   boomJS 缘起

前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮炫的,效果图:

9159.com 14

我就寻思着,在浏览器环境下,用 Javascript 怎么实现呢?

在浓烈的好奇心驱使下,最终利用 Javascript 和 CSS3 完成了模仿上面的效果,通过调用方法,可以将页面上的图片一键爆炸,我给它起了个 boomJS 的名字,贴两张效果图:

9159.com 15      9159.com 16

Demo戳我。

 

3D 透视照片墙

9159.com 17

transform-style 与 perspective

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

   boomJS 实现

我感觉效果还是可以的,因为没有使用 canvas ,所以无法取到图片上每个像素的颜色值。使用了一些比较讨(sha)巧(bi)的方法,下面简单讲讲如何实现的:

1、构造新图容器,隐藏原图

原本的图是 <img> 标签的图,一张整图,最终的效果当然不是在原图上 boom ,看上去连贯的动画本质上只是一个障眼法,利用 Javascript 做了一些巧妙的变换,所以第一步所做的就是取到原图的高宽及相对浏览器视窗的定位,再创建一个新的容器附着在原图之上,然后隐藏原图。

这个方法里面我主要用到了 getBoundingClientRect 这个方法,该方法返回元素的大小及其相对于视口的位置,完美满足我的需要。

嗯,这一步做了什么呢?简单的如下所示:

9159.com 18

 

2、生成一张张是碎裂小图

最后效果是图片 boom 一下裂开,所以第二步要做的就是模拟出一小块一小块小图,这里每一个小块就是一个新的 div ,然后利用图片的定位 background-position 将其定位到合适的位置,嘿,看看效果:

9159.com 19

可以看到,这里分割成了很多个小块,每个小块其实是一个 div 然后,这些小块被添加到我们上一步中设置的容器当中,然后利用原图设置 div 的背景图,所有 div 利用的都是原图一张背景图,接着图片定位就可以完成这样一个效果,说起来很简单,但是中间经历了很多计算,如何分割图片,图片的 width 与 height 比(是横图还是竖图),每个小块 div 的定位及小 div 背景图的定位,具体的可以到这里看看:boomJS。

最后为了好看,设置了圆角,但是这样爆炸的话,感觉不够真实,图片一块一块的清晰可辨。所以利用缩放 scale ,随机让每个小块放大或者缩小,再看看缩放后的效果:

9159.com 20 

嗯,模糊了很多,效果近一步增强,这样爆开来比较真实。

 

3、boom 爆炸!

嗯,到了鸡冻人心的最后一步,要做的就是给每一个 div 小块设置运动轨迹,然后同时爆开。

比较繁琐,需要先算出图片的中心点,然后每个 div 块点以中心为基准点向外做直线运动,不得不说,做这个我还特意恶补了一下高中的几何知识(囧)。为了效果更加真实,每个 div 块运动的直线距离添加一个正负值恰当的随机数,那么就可以达到有的块炸的比较远,有的块炸的比较近。利用未缩放的小块图片做一下大概的示意图:

9159.com 21

 

最后在炸裂的瞬间,让每个小块渐变消失,就可以完成上面 gif 所示的效果了。

 

总结一下,其实过程当中还有很多细节没有提及,比较重要的是动画触发的时序控制,因为最近在研读 jQuery 源码,就简单的利用了 jQuery 的队列来实现控制时序。

提到了就安利一下,我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下。jQuery v1.10.2 源码注解。

然后本文没有贴代码,这个动画效果完整的代码在我的 github 上,有兴趣也可以围观一下:boomJS 

本文较短,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有帮助,请点下推荐,写文章不容易。

 

跳跃的音符

9159.com 22

可能上面的效果对精通 CSS3 的而言小菜一碟,写本文的目的也是我自己学习积累的一个过程,感兴趣的就可以一起往下看啦。

其实 CSS3 效果真的很强大,上面的效果都是纯 CSS 实现,个人感觉越是深入 CSS 的学习,越是觉得自己不懂 CSS ,不过话说回来,这些效果的实用场景不大,但是作为一个有追求的前端,我觉得还是有必要去好好了解一下这些属性。

所以本文接下来要讲的大概有:

  • transform-style: preserve-3d 三维效果
  • perspective and perspective-origin 3D视距,透视/景深效果
  • CSS3 filter CSS3滤镜
  • transparent、radial-gradient 透明与渐变

transform-style

要利用 CSS3 实现 3D 的效果,最主要的就是借助 transform-style 属性。transform-style 只有两个值可以选择:

JavaScript

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

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

当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时,容器的后代元素便会具有 3D 效果,这样说有点抽象,也就是当前父容器设置了 preserve-3d 值后,它的子元素就可以相对于父元素所在的平面,进行 3D 变形操作。

当父元素设置了 transform-style:preserve-3d 后,就可以对子元素进行 3D 变形操作了,3D 变形和 2D 变形一样可以,使用 transform 属性来设置,或者可以通过制定的函数或者通过三维矩阵来对元素变型操作:

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

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

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

对于 API 的学习,我建议去源头看看,不要满足于消费别人的总结,transform-style API。

这里要特别提出的,3D 坐标轴,所谓的绕 X、Y、Z 轴的三个轴,这个不难,感觉空间想象困难的,照着 API 试试,绕每个轴都转一下就明白了:

9159.com 23

了解过后,那么依靠上面所说的,其实我们就已经可以做一个立方体出来了。所谓实践出真知,下面就看看该如何一步步得到一个立方体。

1、准备六个正方形

这个好理解,正方体六个面,首先用 div 做出 6 个面,包裹在同一个父级容器下面,父级容器设置 transform-style:preserve-3d ,这样接下来就可以对 6 个面进行 3D 变换操作,为了方便演示,我用 6 个颜色不一样的面:

9159.com 24

上面的图是示意有 6 个面,当然我们要把 6 个正方形 div 设置为绝对定位,重叠叠在一起,那么应该是这样的,只能看到一个面:

9159.com 25

2、父容器做简单的变换

为了最后的看上去的效果好看,我们需要先对父容器进行变换,运用上面说的 rotate 属性,将容器的角度改变一下:

JavaScript

.cube-container{ -webkit-transform: rotateX(-33.5deg) rotateY(45deg); transform: rotateX(-33.5deg) rotateY(45deg); }

1
2
3
4
.cube-container{
    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
    transform: rotateX(-33.5deg) rotateY(45deg);
}

那么,变换之后,得到这样一个图形:

9159.com 26

嗯,这个时候,6 个 div 面仍然是重叠在一起的。

3、对每个面做 3D 变换

接下来就是对每个面进行 3D 变换了,运用 rotate 可以对 div 平面进行旋转,运用 translate 可以对 div 平面进行平移,而且要记住现在我们是在三维空间内变换,转啊转啊,我们可能会得到这样的形状:

9159.com 27

算好旋转角度和偏移距离,最后上面的 6 个面就可以完美拼成一个立方体咯!为了效果更好,我给每个面增加一些透明度,最后得到一个完整的立方体:

9159.com 28

为了更有立体感,我们可以调整父容器的旋转角度,旋转看上去更立体的角度:

9159.com 29

至此,一个 3D 立方体就完成了。写这篇文章的时候,本来到这里,这一块应该就结束了,但是写到这里的时候,突然突发奇想,既然正方体可以(正六面体),那么正四面体,正八面体甚至球体应该也能做出来吧?

嗯,没有按住躁动的心,立马动手尝试了一番,最后做出了下面的两个:

9159.com 30  9159.com 31

就不再详细讨论如何一步一步得到这两个了,有兴趣的可以去我的 github 上看看源码,或者直接和我讨论交流,简单的谈谈思路:

正四面体

和正方体一样,我们首先要准备 4 个三角形(下面会详细讲如何利用 CSS3 制作一个三角形 div),注意 4 个三角形应该是重叠在一起的,然后将其中三个分别沿着三条边的中心点旋转 70.5 度(正四面体临面夹角),就可以得到一个正四面体。

注意沿着三条边的中心点旋转 70.5 度这句话,意思是每个图形要定位一次旋转中心,也就是 transform-origin 属性,它允许我们设置旋转元素的基点位置。

球体

上面的 GIF 图因为添加了 animation 动画效果,看上去很像一个球体在运动,其实只用了 4 个 div,每个 div 利用 border-radius:100% 设置为圆形,然后以中心点为基准,每个圆形 div 绕 Y 轴旋转不同的角度,再让整个圆形容器绕 Y 轴动起来,就可以得到这样一个效果了。

 

perspective and perspective-origin 3D视距,透视/景深效果

继续说 3D ,接下来要说的属性是 persepective 和 perspective-origin 。

persepective

9159.com,JavaScript

// 语法 perspective: number|none;

1
2
// 语法
perspective: number|none;

perspective 为一个元素设置三维透视的距离,仅作用于元素的后代,而不是其元素本身。

简单来说,当元素没有设置 perspective 时,也就是当 perspective:none/0 时所有后代元素被压缩在同一个二维平面上,不存在景深的效果。

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

perspective-origin

perspective-origin 表示 3D 元素透视视角的基点位置,默认的透视视角中心在容器是 perspective 所在的元素,而不是他的后代元素的中点,也就是 perspective-origin: 50% 50%。

JavaScript

// 语法 perspective-origin: x-axis y-axis; // x-axis : 定义该视图在 x 轴上的位置。默认值:50% // y-axis : 定义该视图在 y 轴上的位置。默认值:50%

1
2
3
4
5
// 语法
perspective-origin: x-axis y-axis;
 
// x-axis : 定义该视图在 x 轴上的位置。默认值:50%
// y-axis : 定义该视图在 y 轴上的位置。默认值:50%

值得注意的是,CSS3 3D 变换中的透视的透视点是在浏览器的前方。

说总是很难理解,运用上面我们做出来的正方体试验一下,我设置了正方体的边长为 50 px ,这里设置正方体容器 cuber-inner 的 persepective 的为 100 px,而 perspective-origin 保持为默认值:

JavaScript

-webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-perspective: 100px; perspective: 100px;

1
2
3
4
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 100px;
perspective: 100px;

上面这样设置,也就是相当于我站在 100px 的长度外去看这个立方体,效果如下:

9159.com 32

通过调整 persepective 和 perspective-origin 的值,可以看到不一样的图形,这个很好理解,我们观测一个物体的角度和距离物体的距离不断发生改变,我们看的物体也是不一样的,嗯想象一下小学课文,杨桃和星星,就能容易明白了。

需要提出的是,我上面的几个正多面体图形和球形图形是没有加上 persepective 值的,感兴趣的可以加上试一下看看效果。

transform-style

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

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

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

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

当父元素设置了 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

// 语法 perspective: number|none;

1
2
// 语法
perspective: number|none;

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

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

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

3D 透视照片墙

回到文章一开始我贴的那个 3D 照片墙,运用 transform-style: preserve-3d 和 persepective ,可以做出效果很好的这种 3D 照片墙旋转效果。

代码就不贴了,本文已经很长了,只是简单的谈谈原理,感兴趣的去扒源码看看。

1、设立一个舞台,也就是包裹旋转的图片们的容器,给他设置一个 persepective 距离,以及 transform-style: preserve-3d 让后代可以进行 3D 变换;

2、准备 N 张图片置于容器内部,N 的大小看个人喜好了,图片的 3D 旋转木马效果是类似钢管舞旋转的运动,因此是绕 Y 轴的,我们关心的是 rotateY 的大小,根据我们添加的图片数量,用 360° 的圆周角将每个图片等分,也就是让每张图片绕 Y 轴旋转固定角度依次散开:(下面的图为示意效果,我调整了一下角度和透明度)

9159.com 33

3、这个时候,N 张图肯定是重合叠在了一起,所以这里关键一步是运用 translateZ(length) 让图片沿 Z 轴平移,也就是运用 translateZ 可以让图片离我们更近或者更远,因为上一步设置了图片不同的 rotateY() 角度,所以 N 张图片设定一个 translateZ 后,图片就很自然以中点为圆心分散开了,也就是这样:

9159.com 34

 

4、最后利用 animation ,我们让舞台,也就是包裹着图片的容器绕 Y 轴旋转起来(rotateY),那么一个类似旋转木马的 3D 照片墙效果就完成了!

这里要注意的一点是设置的 persepective 值和单个图片 translateZ(length) 的值,persepective 一定要比 translateZ(length) 的值大,否则就是相当于舞台跑你身后去了,肯定是看不到效果了。

 

本来想继续说

  • CSS3 filter CSS3滤镜
  • transparent、radial-gradient 透明与渐变

这些个可以让动画效果变得更赞的一些 CSS3 属性,但是觉得本文篇幅已经很长,而且这两个属性有点偏离主题,打算另起一文,再做深入探究。

再说两点本文没有谈到的,但是很有用处的小细节,感兴趣的可以去了解了解,也会在接下来进行详细探讨:

1、使用 transform3d api 代替 transform api,强制开启 GPU 加速,提升网站动画渲染性能;

2、使用 CSS3 will-change 提高页面滚动、动画等渲染性能

 

OK,本文到此结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文完整的代码,以及更多的 CSS3 效果,在我 github 上可以看到,也希望大家可以点个 star。

本文的 demo 戳我。

如果本文对你有帮助,请点下赞,写文章不容易。

打赏支持我写出更多好文章,谢谢!

打赏作者

3D View页面的布局结构

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

下面是我觉得比较好的一种方式:

XHTML

<!-- 最外层容器,控制图形的位置及在整个页面上的布局--> <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 最外层容器,控制图形的位置及在整个页面上的布局-->
<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 层,图片层,装入我们要拼接的图片,下文会提及。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

9159.com 35 9159.com 36

5 赞 17 收藏 5 评论

图片拼接

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

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

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

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

9159.com 37

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

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

看看俯视图:

9159.com 38

效果图:

See the Pen 3DView3 by Chokcoco (@Chokcoco) on CodePen.

关于作者:chokcoco

9159.com 39

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

9159.com 40

图片分割

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

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

9159.com 41

我们把它分割为 20 份,拼成一个正 20 边形,当然不用一块一块切图下来,利用 background-position 就可以完成了。而且分割的份数越多,最终做出来的效果越像一个圆柱,效果也更加真实。

正 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); } }

1
2
3
4
5
6
7
8
// 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可以戳这里

9159.com 42

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

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

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

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

我们通过 class 为 control 这个 div 控制这个效果,不过这里控制我们进入圆柱
内部的属性不是调整修改 perspective 属性,而是调整 translateZ 属性。通过控制 translateZ 得到的画面更加真实,可以自己尝试一下分别控制 perspective 与 translateZ 得到的效果,便会有深刻的感受。

最后的效果: Demo可以戳这里,由于是移动端效果,打开模拟器观看更佳

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

9159.com 43

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

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

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

Css33DView

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

9159.com 44 9159.com 45

1 赞 5 收藏 1 评论

关于作者:chokcoco

9159.com 46

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

9159.com 47

本文由9159.com发布于前端,转载请注明出处:禁止转载,禁止转载

关键词: