CSS3 实现全景图浏览效果

Demo

实现思路

1. 利用 CSS3 做出一个 3D 立方体。

2. 在立方体的6个面设置目标图片（利用Pano2VR 或者类似的全景工具导出的图片，一共有6张）。

   

3. 使用perspective、translateZ、transform-style: preserve-3d 等属性改变视图的大小。

4. 添加触摸事件改变translateX、translateY的角度数即可实现一个基本的全景图效果。

注：页面使用了ES6，浏览器必须开启相关的功能才可以看到效果。

Chrome 60 打开 chrome:flags 启用 Experimental Web Platform features