很多人说淘宝造物节H5能炸了朋友圈，活动的H5效果简直不要太好 。但是也还与人对淘宝造物节H5知之甚少，不知道是怎么做的，因此在接下来的内容中，小编为大家进行详细的介绍 。
从原理上来说，开发者实际只是用了一个非常常规的展示技术，就是CSS3的空间变换命令，而这个所谓的3D场景是一个不折不扣的伪3D 。实际用户们早就见过这种玩法了，只不过以前都是用在真实场景图片上，而这次是首次用在插画上，所以会给人完全不同的新鲜感 。而且这支H5并不算是虚拟现实，也不能算作VRH5，真是十分糟糕的技术混淆!
全景图演示图，该H5与之原理相似 。

文章插图
这支H5的全景图 。

文章插图
我们通过画面的缓慢播放发现，原来背景图是一条条的，被切割了!

文章插图
尤其是当你进入场景内，把画面放大时，会发现一条条接缝，这就让我们更确信了一个判断，而当通过后台把元素罗列出来时，就一目了然了!

文章插图
不仅仅是主背景，就连其它画面元素也都被切割成了类似样式，这又是为什么呐?

文章插图
其实这就是CSS位置变换命令的一个巧妙用法，开发者将所有的图等距离大小切割成了一条条，并把它们围成一个圆形，这样在体验上就创造了一个空间 。利用一些算法和简单技术就创造了比较丰富的视觉表现，这真是非常聪明的用法!
H5空间原理的示意图：

文章插图
但问题又来了!一般情况下，想要在H5上实现真实3D展示，需要借助webGL这种编辑方式，而想绕过这个技术壁垒的话，常规有以下三种方式：
视频、div+css、canvas

文章插图
视频做成3D糊下群众，这个很好理解 。但我们通常又会认为canvas相比div+css是更好的解决办法，并且效率更高 。可以处理数量更大的素材，并且不耗费请求数量 。
淘宝造物节h5的具体的原理在以上的内容中为大家分析出来了，很多的人之所以会去参与此次的造物节活动，都是被这个现场的效果吸引过去的，此次的造物节活动在杭州西湖举行 。
【淘宝造物节h5怎么做的?原理是什么?】

秒懂生活扩展阅读

• 淘宝刷单商家货到付款怎么开通？怎么算佣金？
• 淘宝联盟可以退税吗？怎么申请呢？
• 淘宝客采集软件违规吗?需要注意什么呢？
• 淘宝网店装修布局排版有哪些技巧？
• 淘宝付费推广怎么实现?
• 文案：教师节祝福语 教师节文案简短
• 妇女节对妈妈祝福语2021
• 淘宝订单回收站在哪里
• 2022抖音春节红包活动有哪些参加方法
• 清明节是为了纪念谁