苹果官网的这个360°旋转功能是怎么用html5实现的？ http://www.apple.com/html5/showcase/threesixty/

发布网友发布时间：2022-05-12 06:03

共2个回答

懂视网时间：2022-05-12 10:24

苹果官网目前的翻页视差效果，不同于目前人们所熟知的上下元素或者左右元素的位移差。例如目前Apple Watch页面来看Apple Watch - Apple (中国)，在页面翻滚的同时，手表也会以空间形式的翻转。现在来看手表绝不是一个简单的png图片了。这种是运用了JQ和CSS3的哪些效果可以实现的，还有就是需要什么样的图片素材可以满足这种翻转。希望大神能够帮忙解析一下

回复内容：

谢邀。

有趣的效果。

实际上是 css3 的变换（transform) ，和 canvas 帧动画。

注意看下图，这是其中一个手表的图片。

单单为了做这一个手表的动画，发了104 个请求（汗。。）

然后第一个图片的表带是张开的，后面的图片越来越闭合，这就是帧动画。

然后同一帧图片有两个请求，一个 png，一个 svg ， svg 是用来做蒙板抠图用的（ Photoshop 用过么？）。这一这里的 .globalCompositeOperation 。

实际上还有优化空间，可以用 sprite sheet 把这些散图拼起来，节约 http 请求。

热心网友时间：2022-05-12 07:32

FLSAH
由很多张图片组成的

苹果官网的这个360°旋转功能是怎么用html5实现的？ http:&#47;&#47;www.apple.com&#47;html5&#47;showcase&#47;threesixty&#47;

回复内容：

苹果官网的这个360°旋转功能是怎么用html5实现的？ http://www.apple.com/html5/showcase/threesixty/